【CSSアニメーション】HTMLとCSSだけでコーラ（炭酸ジュワジュワ～）を作ってみた

# はじめに

@mame_hashbill さんの記事の「[[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●●](https://qiita.com/mame_hashbill/items/ccf6e89f46fde8a8e20c)」を見て、めっちゃタピオカだー！すげー！ってなりました:satisfied:

そこで、自分もCSSアニメーションでなにか作ってみたいと思って、コーラを作ってみました！
炭酸をできるだけリアルに表現するために頑張りました！:fire::fire::fire:

# コーラ

<p class="codepen" data-height="413" data-theme-id="0" data-default-tab="html,result" data-user="michimichix521" data-slug-hash="PoYOgGy" style="height: 413px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="コーラ">
  <span>See the Pen <a href="https://codepen.io/michimichix521/pen/PoYOgGy/">
  コーラ</a> by みっちー (<a href="https://codepen.io/michimichix521">@michimichix521</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

こちらがコーラとそのプログラムになります。
コードをコピペすると同じように表示できると思います！

色とか変えることで、他の炭酸飲料水にもなると思うので、興味がある方はぜひやってみてください！:wink:


こちらにもコードを記載しておきます。

```index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>コーラ</title>
	<link rel="stylesheet" href="styles.css">
</head>
<body>

	<div class="cup">
		<div class="drink">
			<div class="bubbles">
				<div class="bubble bubble-2"></div>
				<div class="bubble bubble-5"></div>
				<div class="bubble bubble-1"></div>
				<div class="bubble bubble-3"></div>
				<div class="bubble bubble-4"></div>
			</div>
			<div class="bubbles">
				<div class="bubble bubble-4"></div>
				<div class="bubble bubble-1"></div>
				<div class="bubble bubble-5"></div>
				<div class="bubble bubble-2"></div>
				<div class="bubble bubble-3"></div>
			</div>
			<div class="bubbles">
				<div class="bubble bubble-2"></div>
				<div class="bubble bubble-4"></div>
				<div class="bubble bubble-3"></div>
				<div class="bubble bubble-5"></div>
				<div class="bubble bubble-1"></div>
			</div>
			<div class="bubbles">
				<div class="bubble bubble-3"></div>
				<div class="bubble bubble-5"></div>
				<div class="bubble bubble-2"></div>
				<div class="bubble bubble-4"></div>
				<div class="bubble bubble-1"></div>
			</div>
		</div>

		<div class="straw"></div>

	</div>
</body>
</html>
```

```styles.css
body{
	background-color:skyblue;
}

.cup{
	margin:60px auto 0;
	width:150px;
	height:250px;
	box-sizing: border-box;
	border: 10px solid whitesmoke;
	border-radius:5px;
	border-top:none;
}

.drink{
	margin:0 auto;
	width:130px;
	height:220px;
	background-color:#521810;
	border-radius:3px;
	position:relative;
	top:20px;
}

.bubbles{
	width:130px;
	height:55px;

	display:flex;
	align-items:flex-end;
}

.bubble{
	margin:0 auto;
	width:7px;
	height:7px;
	background-color:snow;
	opacity:0.05;
	border-radius:50%;

	animation-name:move;
	animation-timing-function:ease-out;
	animation-iteration-count:infinite;
}

.bubble-1{animation-duration:0.8s;}
.bubble-2{animation-duration:1.0s;}
.bubble-3{animation-duration:1.2s;}
.bubble-4{animation-duration:1.4s;}
.bubble-5{animation-duration:1.6s;}

@keyframes move{
	from{transform:none;}
	to{transform:translateY(-40px);}
}

.straw{
	width:20px;
	height:300px;
	background-color:tomato;
	border-radius:3px;
	opacity:0.8;

	position:relative;
	top:-275px;
	left:75px;

	transform:rotate(20deg);
}
```


# おわりに
ここまで読んでいただき、ありがとうございました。
CSSアニメーション楽しいので、今後もなにか作っていきたいです！