CSS3 – 炭酸飲料のような泡を量産するアニメーション

この記事は約6分で読めます。
スポンサーリンク

飲料販売サイトのバナーにサイダーの泡のようなアニメーションが欲しいと思い、CSS3とjQueryを使って作成しました。

スポンサーリンク

概要

CSSで泡単体のデザインと基本的なアニメーションパターンを作り、そのスピードや配置や大きさを少しずつ変えてパターンを量産、jQueryでそれぞれが泡になるHTMLタグを量産しています。

SCSSを使用した場合

See the Pen
泡量産アニメーション
by J. (@umvjcqzk)
on CodePen.

HTML

HTMLタグは簡潔です。fieldクラスdivタグの中身はjQueryで量産します。

<div class="field"></div>

CSS

cssは、アニメーションパターンの量産でSCSSを使用しています。

/*** 基本設定 ***/
.field {
 overflow: hidden;
 width: 100%;
 background-color: #0cf;
}
.bubble {
 position: absolute;
 bottom: 0;
 left: 50%;
}
.bubble .item {
 display: block;
 width: 20px;
 height: 20px;
 border-radius: 100%;
 box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
 -webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
 position: relative;
}
.bubble .item:after {
 content: "";
 display: block;
 width: 20%;
 height: 20%;
 border-radius: 100%;
 background: rgba(255, 255, 255, 0.6);
 position: absolute;
 right: 15%;
 top: 15%;
 transform: rotateZ(45deg) scaleY(0.8);
 -webkit-transform: rotateZ(45deg) scaleY(0.8);
}
/** アニメーション **/
/* 伸縮 */
@keyframes stretch {
  0% { transform: scaleX(1) scaleY(1); }
  33% { transform: scaleX(0.9) scaleY(1); }
  66% { transform: scaleX(1) scaleY(0.9); }
  100% { transform: scaleX(1) scaleY(1); }
}
@-webkit-keyframes stretch {
  0% { -webkit-transform: scaleX(1) scaleY(1); }
  33% { -webkit-transform: scaleX(0.9) scaleY(1); }
  66% { -webkit-transform: scaleX(1) scaleY(0.9); }
  100% { -webkit-transform: scaleX(1) scaleY(1); } }
/* 横揺れ */
@keyframes shake {
  0% { transform: translateX(10px); }
  50% { transform: translateX(-10px); }
  100% { transform: translateX(10px); }
}
@-webkit-keyframes shake {
  0% { -webkit-transform: translateX(10px); }
  50% { -webkit-transform: translateX(-10px); }
  100% { -webkit-transform: translateX(10px); }
}
/* 移動 */
@keyframes move {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-1000px);
    opacity: 0; }
}
@-webkit-keyframes move {
  0% { -webkit-transform: translateY(0px); }
  100% { -webkit-transform: translateY(-1000px);
    opacity: 0; }
}

/*** 泡のアニメーションパターン量産(SCSS) ***/
@for $i from 0 through 100 {
  $time: $i*0.2;
  $scale: $i*0.1;
  /* 横揺れスピード */
  .shake#{$i * 1} {
    animation: shake ($time+2)+s ease 0s infinite normal;
    -webkit-animation: shake ($time+2)+s ease 0s infinite normal;
  }
  /* 移動スピード */
  .move#{$i * 1}  {
    animation: move ($time+5)+s ease $time+s infinite normal;
    -webkit-animation: move ($time+5)+s ease $time+s infinite normal;
    position: absolute;
    bottom: -10%;
  }
  /* 配置 */
  .pos#{$i * 1}  {
    left: percentage($i*2/100);
  }
  /* 大きさ */
  .scale#{$i * 1}  {
    transform: scale($scale);
    -webkit-transform: scale($scale);
  }
}

JS

jQueryでHTMLタグを量産してアニメーションパターンに変化をつけます。

var winHeight;
var field = $(".field");
winRsize(); //関数の実行
$(window).resize(function() {
	winRsize(); //ブラウザのウィンドウサイズが変更されるたびに検知してリサイズ
});
function winRsize() {
	winHeight = $(window).height(); //ウィンドウの高さを取得
	field.height(winHeight); //ウィンドウの高さをfieldクラスの高さとする
}
var items = 100; //100個量産
for (var i=0; i<=items; i++) {
	var move = Math.ceil( Math.random()*50 );
	var pos = Math.ceil( Math.random()*50 );
	var scale = Math.ceil( Math.random()*10 );
	var stretch = Math.ceil( Math.random()*5 );
	var shake = Math.ceil( Math.random()*5 );
	field.append('
'); }

SCSSを使わずにCSSのみで実現した場合

See the Pen
泡量産アニメーション(CSS)
by J. (@umvjcqzk)
on CodePen.

HTML

HTMLタグは同様にfieldクラスのdivタグのみで、中身はjQueryで量産します。

<div class="field"></div>

CSS

SCSSを使わずにCSSのみで50個分のクラスを記述しています。

/*** 基本設定 ***/
.field {
 overflow: hidden;
 width: 100%;
 background-color: #0cf;
}
.bubble {
 position: absolute;
 bottom: 0;
 left: 50%;
}
.bubble .item {
 display: block;
 width: 20px;
 height: 20px;
 border-radius: 100%;
 box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
 -webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
 position: relative;
}
.bubble .item:after {
 content: "";
 display: block;
 width: 20%;
 height: 20%;
 border-radius: 100%;
 background: rgba(255, 255, 255, 0.6);
 position: absolute;
 right: 15%;
 top: 15%;
 transform: rotateZ(45deg) scaleY(0.8);
 -webkit-transform: rotateZ(45deg) scaleY(0.8);
}
/** アニメーション **/
/* 伸縮 */
@keyframes stretch {
 0% { transform: scaleX(1) scaleY(1); }
 33% { transform: scaleX(0.9) scaleY(1); }
 66% { transform: scaleX(1) scaleY(0.9); }
 100% { transform: scaleX(1) scaleY(1); }
}
@-webkit-keyframes stretch {
 0% { -webkit-transform: scaleX(1) scaleY(1); }
 33% { -webkit-transform: scaleX(0.9) scaleY(1); }
 66% { -webkit-transform: scaleX(1) scaleY(0.9); }
 100% { -webkit-transform: scaleX(1) scaleY(1); }
}
/* 横揺れ */
@keyframes shake {
 0% { transform: translateX(10px); }
 50% { transform: translateX(-10px); }
 100% { transform: translateX(10px); }
}
@-webkit-keyframes shake {
 0% { -webkit-transform: translateX(10px); }
 50% { -webkit-transform: translateX(-10px); }
 100% { -webkit-transform: translateX(10px); }
}
/* 移動(上昇) */
@keyframes move {
 0% { transform: translateY(0px); }
 100% { transform: translateY(-1000px); opacity: 0; }
}
@-webkit-keyframes move {
 0% { -webkit-transform: translateY(0px); }
 100% { -webkit-transform: translateY(-1000px); opacity: 0; }
}
/*** 泡のアニメーションパターン量産 ***/
/* 伸縮 */
.stretch0 {
 animation: stretch 2s ease 0s infinite normal;
 -webkit-animation: stretch 2s ease 0s infinite normal;
}
/* 横揺れ */
.shake0 {
 animation: shake 2s ease 0s infinite normal;
 -webkit-animation: shake 2s ease 0s infinite normal;
}
/* 移動(上昇) */
.move0 {
 animation: move 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal;
 -webkit-animation: move 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal;
}
/* 配置 */
.pos0 {
 left: 0%;
}
/* 大きさ */
.scale0 {
 transform: scale(0);
 -webkit-transform: scale(0);
}
/* 以下同様に変化をつけて50個作成 */
.stretch1 {
 animation: stretch 2.2s ease 0s infinite normal;
 -webkit-animation: stretch 2.2s ease 0s infinite normal;
}
.shake1 {
 animation: shake 2.2s ease 0s infinite normal;
 -webkit-animation: shake 2.2s ease 0s infinite normal;
}
.move1 {
 animation: move 5.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s infinite normal;
 -webkit-animation: move 5.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s infinite normal;
}
.pos1 {
 left: 2%;
}
.scale1 {
 transform: scale(0.1);
 -webkit-transform: scale(0.1);
}
.stretch2 {
 animation: stretch 2.4s ease 0s infinite normal;
 -webkit-animation: stretch 2.4s ease 0s infinite normal;
}
.shake2 {
 animation: shake 2.4s ease 0s infinite normal;
 -webkit-animation: shake 2.4s ease 0s infinite normal;
}
.move2 {
 animation: move 5.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s infinite normal;
 -webkit-animation: move 5.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s infinite normal;
}
.pos2 {
 left: 4%;;
}
.scale2 {
 transform: scale(0.2);
 -webkit-transform: scale(0.2);
}
.stretch3 {
 animation: stretch 2.6s ease 0s infinite normal;
 -webkit-animation: stretch 2.6s ease 0s infinite normal;
}
.shake3 {
 animation: shake 2.6s ease 0s infinite normal;
 -webkit-animation: shake 2.6s ease 0s infinite normal;
}
.move3 {
 animation: move 5.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s infinite normal;
 -webkit-animation: move 5.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s infinite normal;
}
.pos3 {
 left: 6%;
}
.scale3 {
 transform: scale(0.3);
 -webkit-transform: scale(0.3);
}
.stretch4 {
 animation: stretch 2.8s ease 0s infinite normal;
 -webkit-animation: stretch 2.8s ease 0s infinite normal;
}
.shake4 {
 animation: shake 2.8s ease 0s infinite normal;
 -webkit-animation: shake 2.8s ease 0s infinite normal;
}
.move4 {
 animation: move 5.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s infinite normal;
 -webkit-animation: move 5.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s infinite normal;
}
.pos4 {
 left: 8%;
}
.scale4 {
 transform: scale(0.4);
 -webkit-transform: scale(0.4);
}
.stretch5 {
 animation: stretch 3s ease 0s infinite normal;
 -webkit-animation: stretch 3s ease 0s infinite normal;
}
.shake5 {
 animation: shake 3s ease 0s infinite normal;
 -webkit-animation: shake 3s ease 0s infinite normal;
}
.move5 {
 animation: move 6s cubic-bezier(0.47, 0, 0.745, 0.715) 1s infinite normal;
 -webkit-animation: move 6s cubic-bezier(0.47, 0, 0.745, 0.715) 1s infinite normal;
}
.pos5 {
 left: 10%;
}
.scale5 {
 transform: scale(0.5);
 -webkit-transform: scale(0.5);
}
.stretch6 {
 animation: stretch 3.2s ease 0s infinite normal;
 -webkit-animation: stretch 3.2s ease 0s infinite normal;
}
.shake6 {
 animation: shake 3.2s ease 0s infinite normal;
 -webkit-animation: shake 3.2s ease 0s infinite normal;
}
.move6 {
 animation: move 6.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s infinite normal;
 -webkit-animation: move 6.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s infinite normal;
}
.pos6 {
 left: 12%;
}
.scale6 {
 transform: scale(0.6);
 -webkit-transform: scale(0.6);
}
.stretch7 {
 animation: stretch 3.4s ease 0s infinite normal;
 -webkit-animation: stretch 3.4s ease 0s infinite normal;
}
.shake7 {
 animation: shake 3.4s ease 0s infinite normal;
 -webkit-animation: shake 3.4s ease 0s infinite normal;
}
.move7 {
 animation: move 6.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s infinite normal;
 -webkit-animation: move 6.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s infinite normal;
}
.pos7 {
 left: 14%;
}
.scale7 {
 transform: scale(0.7);
 -webkit-transform: scale(0.7);
}
.stretch8 {
 animation: stretch 3.6s ease 0s infinite normal;
 -webkit-animation: stretch 3.6s ease 0s infinite normal;
}
.shake8 {
 animation: shake 3.6s ease 0s infinite normal;
 -webkit-animation: shake 3.6s ease 0s infinite normal;
}
.move8 {
 animation: move 6.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s infinite normal;
 -webkit-animation: move 6.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s infinite normal;
}
.pos8 {
 left: 16%;
}
.scale8 {
 transform: scale(0.8);
 -webkit-transform: scale(0.8);
}
.stretch9 {
 animation: stretch 3.8s ease 0s infinite normal;
 -webkit-animation: stretch 3.8s ease 0s infinite normal;
}
.shake9 {
 animation: shake 3.8s ease 0s infinite normal;
 -webkit-animation: shake 3.8s ease 0s infinite normal;
}
.move9 {
 animation: move 6.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s infinite normal;
 -webkit-animation: move 6.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s infinite normal;
}
.pos9 {
 left: 18%;
}
.scale9 {
 transform: scale(0.9);
 -webkit-transform: scale(0.9);
}
.stretch10 {
 animation: stretch 4s ease 0s infinite normal;
 -webkit-animation: stretch 4s ease 0s infinite normal; }

.shake10 {
 animation: shake 4s ease 0s infinite normal;
 -webkit-animation: shake 4s ease 0s infinite normal; }

.move10 {
 animation: move 7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s infinite normal;
 -webkit-animation: move 7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s infinite normal;
}
.pos10 {
 left: 20%;
}
.scale10 {
 transform: scale(1);
 -webkit-transform: scale(1);
}
.stretch11 {
 animation: stretch 4.2s ease 0s infinite normal;
 -webkit-animation: stretch 4.2s ease 0s infinite normal;
}
.shake11 {
 animation: shake 4.2s ease 0s infinite normal;
 -webkit-animation: shake 4.2s ease 0s infinite normal;
}
.move11 {
 animation: move 7.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s infinite normal;
 -webkit-animation: move 7.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s infinite normal;
}
.pos11 {
 left: 22%;
}
.scale11 {
 transform: scale(1.1);
 -webkit-transform: scale(1.1);
}
.stretch12 {
 animation: stretch 4.4s ease 0s infinite normal;
 -webkit-animation: stretch 4.4s ease 0s infinite normal;
}
.shake12 {
 animation: shake 4.4s ease 0s infinite normal;
 -webkit-animation: shake 4.4s ease 0s infinite normal;
}
.move12 {
 animation: move 7.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s infinite normal;
 -webkit-animation: move 7.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s infinite normal;
}
.pos12 {
 left: 24%;
}
.scale12 {
 transform: scale(1.2);
 -webkit-transform: scale(1.2);
}
.stretch13 {
 animation: stretch 4.6s ease 0s infinite normal;
 -webkit-animation: stretch 4.6s ease 0s infinite normal;
}
.shake13 {
 animation: shake 4.6s ease 0s infinite normal;
 -webkit-animation: shake 4.6s ease 0s infinite normal;
}
.move13 {
 animation: move 7.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s infinite normal;
 -webkit-animation: move 7.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s infinite normal;
}
.pos13 {
 left: 26%;
}
.scale13 {
 transform: scale(1.3);
 -webkit-transform: scale(1.3);
}
.stretch14 {
 animation: stretch 4.8s ease 0s infinite normal;
 -webkit-animation: stretch 4.8s ease 0s infinite normal;
}
.shake14 {
 animation: shake 4.8s ease 0s infinite normal;
 -webkit-animation: shake 4.8s ease 0s infinite normal;
}
.move14 {
 animation: move 7.8s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s infinite normal;
 -webkit-animation: move 7.8s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s infinite normal;
}
.pos14 {
 left: 28%;
}
.scale14 {
 transform: scale(1.4);
 -webkit-transform: scale(1.4);
}
.stretch15 {
 animation: stretch 5s ease 0s infinite normal;
 -webkit-animation: stretch 5s ease 0s infinite normal;
}
.shake15 {
 animation: shake 5s ease 0s infinite normal;
 -webkit-animation: shake 5s ease 0s infinite normal;
}
.move15 {
 animation: move 8s cubic-bezier(0.47, 0, 0.745, 0.715) 3s infinite normal;
 -webkit-animation: move 8s cubic-bezier(0.47, 0, 0.745, 0.715) 3s infinite normal;
}
.pos15 {
 left: 30%;
}
.scale15 {
 transform: scale(1.5);
 -webkit-transform: scale(1.5);
}
.stretch16 {
 animation: stretch 5.2s ease 0s infinite normal;
 -webkit-animation: stretch 5.2s ease 0s infinite normal;
}
.shake16 {
 animation: shake 5.2s ease 0s infinite normal;
 -webkit-animation: shake 5.2s ease 0s infinite normal;
}
.move16 {
 animation: move 8.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s infinite normal;
 -webkit-animation: move 8.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s infinite normal;
}
.pos16 {
 left: 32%;
}
.scale16 {
 transform: scale(1.6);
 -webkit-transform: scale(1.6);
}
.stretch17 {
 animation: stretch 5.4s ease 0s infinite normal;
 -webkit-animation: stretch 5.4s ease 0s infinite normal;
}
.shake17 {
 animation: shake 5.4s ease 0s infinite normal;
 -webkit-animation: shake 5.4s ease 0s infinite normal;
}
.move17 {
 animation: move 8.4s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4s infinite normal;
 -webkit-animation: move 8.4s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4s infinite normal;
}
.pos17 {
 left: 34%; }

.scale17 {
 transform: scale(1.7);
 -webkit-transform: scale(1.7);
}
.stretch18 {
 animation: stretch 5.6s ease 0s infinite normal;
 -webkit-animation: stretch 5.6s ease 0s infinite normal;
}
.shake18 {
 animation: shake 5.6s ease 0s infinite normal;
 -webkit-animation: shake 5.6s ease 0s infinite normal;
}
.move18 {
 animation: move 8.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s infinite normal;
 -webkit-animation: move 8.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s infinite normal;
}
.pos18 {
 left: 36%;
}
.scale18 {
 transform: scale(1.8);
 -webkit-transform: scale(1.8);
}
.stretch19 {
 animation: stretch 5.8s ease 0s infinite normal;
 -webkit-animation: stretch 5.8s ease 0s infinite normal;
}
.shake19 {
 animation: shake 5.8s ease 0s infinite normal;
 -webkit-animation: shake 5.8s ease 0s infinite normal;
}
.move19 {
 animation: move 8.8s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8s infinite normal;
 -webkit-animation: move 8.8s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8s infinite normal;
}
.pos19 {
 left: 38%;
}
.scale19 {
 transform: scale(1.9);
 -webkit-transform: scale(1.9);
}
.stretch20 {
 animation: stretch 6s ease 0s infinite normal;
 -webkit-animation: stretch 6s ease 0s infinite normal;
}
.shake20 {
 animation: shake 6s ease 0s infinite normal;
 -webkit-animation: shake 6s ease 0s infinite normal;
}
.move20 {
 animation: move 9s cubic-bezier(0.47, 0, 0.745, 0.715) 4s infinite normal;
 -webkit-animation: move 9s cubic-bezier(0.47, 0, 0.745, 0.715) 4s infinite normal;
}
.pos20 {
 left: 40%;
}
.scale20 {
 transform: scale(2);
 -webkit-transform: scale(2);
}
.stretch21 {
 animation: stretch 6.2s ease 0s infinite normal;
 -webkit-animation: stretch 6.2s ease 0s infinite normal;
}
.shake21 {
 animation: shake 6.2s ease 0s infinite normal;
 -webkit-animation: shake 6.2s ease 0s infinite normal;
}
.move21 {
 animation: move 9.2s cubic-bezier(0.47, 0, 0.745, 0.715) 4.2s infinite normal;
 -webkit-animation: move 9.2s cubic-bezier(0.47, 0, 0.745, 0.715) 4.2s infinite normal;
}
.pos21 {
 left: 42%;
}
.scale21 {
 transform: scale(2.1);
 -webkit-transform: scale(2.1);
}
.stretch22 {
 animation: stretch 6.4s ease 0s infinite normal;
 -webkit-animation: stretch 6.4s ease 0s infinite normal;
}
.shake22 {
 animation: shake 6.4s ease 0s infinite normal;
 -webkit-animation: shake 6.4s ease 0s infinite normal;
}
.move22 {
 animation: move 9.4s cubic-bezier(0.47, 0, 0.745, 0.715) 4.4s infinite normal;
 -webkit-animation: move 9.4s cubic-bezier(0.47, 0, 0.745, 0.715) 4.4s infinite normal;
}
.pos22 {
 left: 44%;
}
.scale22 {
 transform: scale(2.2);
 -webkit-transform: scale(2.2);
}
.stretch23 {
 animation: stretch 6.6s ease 0s infinite normal;
 -webkit-animation: stretch 6.6s ease 0s infinite normal;
}
.shake23 {
 animation: shake 6.6s ease 0s infinite normal;
 -webkit-animation: shake 6.6s ease 0s infinite normal;
}
.move23 {
 animation: move 9.6s cubic-bezier(0.47, 0, 0.745, 0.715) 4.6s infinite normal;
 -webkit-animation: move 9.6s cubic-bezier(0.47, 0, 0.745, 0.715) 4.6s infinite normal;
}
.pos23 {
 left: 46%;
}
.scale23 {
 transform: scale(2.3);
 -webkit-transform: scale(2.3);
}
.stretch24 {
 animation: stretch 6.8s ease 0s infinite normal;
 -webkit-animation: stretch 6.8s ease 0s infinite normal;
}
.shake24 {
 animation: shake 6.8s ease 0s infinite normal;
 -webkit-animation: shake 6.8s ease 0s infinite normal;
}
.move24 {
 animation: move 9.8s cubic-bezier(0.47, 0, 0.745, 0.715) 4.8s infinite normal;
 -webkit-animation: move 9.8s cubic-bezier(0.47, 0, 0.745, 0.715) 4.8s infinite normal;
}
.pos24 {
 left: 48%;
}
.scale24 {
 transform: scale(2.4);
 -webkit-transform: scale(2.4);
}
.stretch25 {
 animation: stretch 7s ease 0s infinite normal;
 -webkit-animation: stretch 7s ease 0s infinite normal;
}
.shake25 {
 animation: shake 7s ease 0s infinite normal;
 -webkit-animation: shake 7s ease 0s infinite normal;
}
.move25 {
 animation: move 10s cubic-bezier(0.47, 0, 0.745, 0.715) 5s infinite normal;
 -webkit-animation: move 10s cubic-bezier(0.47, 0, 0.745, 0.715) 5s infinite normal;
}
.pos25 {
 left: 50%;
}
.scale25 {
 transform: scale(2.5);
 -webkit-transform: scale(2.5);
}
.stretch26 {
 animation: stretch 7.2s ease 0s infinite normal;
 -webkit-animation: stretch 7.2s ease 0s infinite normal;
}
.shake26 {
 animation: shake 7.2s ease 0s infinite normal;
 -webkit-animation: shake 7.2s ease 0s infinite normal;
}
.move26 {
 animation: move 10.2s cubic-bezier(0.47, 0, 0.745, 0.715) 5.2s infinite normal;
 -webkit-animation: move 10.2s cubic-bezier(0.47, 0, 0.745, 0.715) 5.2s infinite normal;
}
.pos26 {
 left: 52%;
}
.scale26 {
 transform: scale(2.6);
 -webkit-transform: scale(2.6);
}
.stretch27 {
 animation: stretch 7.4s ease 0s infinite normal;
 -webkit-animation: stretch 7.4s ease 0s infinite normal;
}
.shake27 {
 animation: shake 7.4s ease 0s infinite normal;
 -webkit-animation: shake 7.4s ease 0s infinite normal;
}
.move27 {
 animation: move 10.4s cubic-bezier(0.47, 0, 0.745, 0.715) 5.4s infinite normal;
 -webkit-animation: move 10.4s cubic-bezier(0.47, 0, 0.745, 0.715) 5.4s infinite normal;
}
.pos27 {
 left: 54%;
}
.scale27 {
 transform: scale(2.7);
 -webkit-transform: scale(2.7);
}
.stretch28 {
 animation: stretch 7.6s ease 0s infinite normal;
 -webkit-animation: stretch 7.6s ease 0s infinite normal;
}
.shake28 {
 animation: shake 7.6s ease 0s infinite normal;
 -webkit-animation: shake 7.6s ease 0s infinite normal;
}
.move28 {
 animation: move 10.6s cubic-bezier(0.47, 0, 0.745, 0.715) 5.6s infinite normal;
 -webkit-animation: move 10.6s cubic-bezier(0.47, 0, 0.745, 0.715) 5.6s infinite normal;
}
.pos28 {
 left: 56%;
}
.scale28 {
 transform: scale(2.8);
 -webkit-transform: scale(2.8);
}
.stretch29 {
 animation: stretch 7.8s ease 0s infinite normal;
 -webkit-animation: stretch 7.8s ease 0s infinite normal;
}
.shake29 {
 animation: shake 7.8s ease 0s infinite normal;
 -webkit-animation: shake 7.8s ease 0s infinite normal;
}
.move29 {
 animation: move 10.8s cubic-bezier(0.47, 0, 0.745, 0.715) 5.8s infinite normal;
 -webkit-animation: move 10.8s cubic-bezier(0.47, 0, 0.745, 0.715) 5.8s infinite normal;
}
.pos29 {
 left: 58%;
}
.scale29 {
 transform: scale(2.9);
 -webkit-transform: scale(2.9);
}
.stretch30 {
 animation: stretch 8s ease 0s infinite normal;
 -webkit-animation: stretch 8s ease 0s infinite normal;
}
.shake30 {
 animation: shake 8s ease 0s infinite normal;
 -webkit-animation: shake 8s ease 0s infinite normal;
}
.move30 {
 animation: move 11s cubic-bezier(0.47, 0, 0.745, 0.715) 6s infinite normal;
 -webkit-animation: move 11s cubic-bezier(0.47, 0, 0.745, 0.715) 6s infinite normal;
}
.pos30 {
 left: 60%;
}
.scale30 {
 transform: scale(3);
 -webkit-transform: scale(3);
}
.stretch31 {
 animation: stretch 8.2s ease 0s infinite normal;
 -webkit-animation: stretch 8.2s ease 0s infinite normal;
}
.shake31 {
 animation: shake 8.2s ease 0s infinite normal;
 -webkit-animation: shake 8.2s ease 0s infinite normal;
}
.move31 {
 animation: move 11.2s cubic-bezier(0.47, 0, 0.745, 0.715) 6.2s infinite normal;
 -webkit-animation: move 11.2s cubic-bezier(0.47, 0, 0.745, 0.715) 6.2s infinite normal;
}
.pos31 {
 left: 62%;
}
.scale31 {
 transform: scale(3.1);
 -webkit-transform: scale(3.1);
}
.stretch32 {
 animation: stretch 8.4s ease 0s infinite normal;
 -webkit-animation: stretch 8.4s ease 0s infinite normal;
}
.shake32 {
 animation: shake 8.4s ease 0s infinite normal;
 -webkit-animation: shake 8.4s ease 0s infinite normal;
}
.move32 {
 animation: move 11.4s cubic-bezier(0.47, 0, 0.745, 0.715) 6.4s infinite normal;
 -webkit-animation: move 11.4s cubic-bezier(0.47, 0, 0.745, 0.715) 6.4s infinite normal;
}
.pos32 {
 left: 64%;
}
.scale32 {
 transform: scale(3.2);
 -webkit-transform: scale(3.2);
}
.stretch33 {
 animation: stretch 8.6s ease 0s infinite normal;
 -webkit-animation: stretch 8.6s ease 0s infinite normal;
}
.shake33 {
 animation: shake 8.6s ease 0s infinite normal;
 -webkit-animation: shake 8.6s ease 0s infinite normal;
}
.move33 {
 animation: move 11.6s cubic-bezier(0.47, 0, 0.745, 0.715) 6.6s infinite normal;
 -webkit-animation: move 11.6s cubic-bezier(0.47, 0, 0.745, 0.715) 6.6s infinite normal;
}
.pos33 {
 left: 66%;
}
.scale33 {
 transform: scale(3.3);
 -webkit-transform: scale(3.3);
}
.stretch34 {
 animation: stretch 8.8s ease 0s infinite normal;
 -webkit-animation: stretch 8.8s ease 0s infinite normal;
}
.shake34 {
 animation: shake 8.8s ease 0s infinite normal;
 -webkit-animation: shake 8.8s ease 0s infinite normal;
}
.move34 {
 animation: move 11.8s cubic-bezier(0.47, 0, 0.745, 0.715) 6.8s infinite normal;
 -webkit-animation: move 11.8s cubic-bezier(0.47, 0, 0.745, 0.715) 6.8s infinite normal;
}
.pos34 {
 left: 68%;
}
.scale34 {
 transform: scale(3.4);
 -webkit-transform: scale(3.4);
}
.stretch35 {
 animation: stretch 9s ease 0s infinite normal;
 -webkit-animation: stretch 9s ease 0s infinite normal;
}
.shake35 {
 animation: shake 9s ease 0s infinite normal;
 -webkit-animation: shake 9s ease 0s infinite normal;
}
.move35 {
 animation: move 12s cubic-bezier(0.47, 0, 0.745, 0.715) 7s infinite normal;
 -webkit-animation: move 12s cubic-bezier(0.47, 0, 0.745, 0.715) 7s infinite normal;
}
.pos35 {
 left: 70%;
}
.scale35 {
 transform: scale(3.5);
 -webkit-transform: scale(3.5);
}
.stretch36 {
 animation: stretch 9.2s ease 0s infinite normal;
 -webkit-animation: stretch 9.2s ease 0s infinite normal;
}
.shake36 {
 animation: shake 9.2s ease 0s infinite normal;
 -webkit-animation: shake 9.2s ease 0s infinite normal;
}
.move36 {
 animation: move 12.2s cubic-bezier(0.47, 0, 0.745, 0.715) 7.2s infinite normal;
 -webkit-animation: move 12.2s cubic-bezier(0.47, 0, 0.745, 0.715) 7.2s infinite normal;
}
.pos36 {
 left: 72%;
}
.scale36 {
 transform: scale(3.6);
 -webkit-transform: scale(3.6);
}
.stretch37 {
 animation: stretch 9.4s ease 0s infinite normal;
 -webkit-animation: stretch 9.4s ease 0s infinite normal;
}
.shake37 {
 animation: shake 9.4s ease 0s infinite normal;
 -webkit-animation: shake 9.4s ease 0s infinite normal;
}
.move37 {
 animation: move 12.4s cubic-bezier(0.47, 0, 0.745, 0.715) 7.4s infinite normal;
 -webkit-animation: move 12.4s cubic-bezier(0.47, 0, 0.745, 0.715) 7.4s infinite normal;
}
.pos37 {
 left: 74%;
}
.scale37 {
 transform: scale(3.7);
 -webkit-transform: scale(3.7);
}
.stretch38 {
 animation: stretch 9.6s ease 0s infinite normal;
 -webkit-animation: stretch 9.6s ease 0s infinite normal;
}
.shake38 {
 animation: shake 9.6s ease 0s infinite normal;
 -webkit-animation: shake 9.6s ease 0s infinite normal;
}
.move38 {
 animation: move 12.6s cubic-bezier(0.47, 0, 0.745, 0.715) 7.6s infinite normal;
 -webkit-animation: move 12.6s cubic-bezier(0.47, 0, 0.745, 0.715) 7.6s infinite normal;
}
.pos38 {
 left: 76%;
}
.scale38 {
 transform: scale(3.8);
 -webkit-transform: scale(3.8);
}
.stretch39 {
 animation: stretch 9.8s ease 0s infinite normal;
 -webkit-animation: stretch 9.8s ease 0s infinite normal;
}
.shake39 {
 animation: shake 9.8s ease 0s infinite normal;
 -webkit-animation: shake 9.8s ease 0s infinite normal;
}
.move39 {
 animation: move 12.8s cubic-bezier(0.47, 0, 0.745, 0.715) 7.8s infinite normal;
 -webkit-animation: move 12.8s cubic-bezier(0.47, 0, 0.745, 0.715) 7.8s infinite normal;
}
.pos39 {
 left: 78%;
}
.scale39 {
 transform: scale(3.9);
 -webkit-transform: scale(3.9);
}
.stretch40 {
 animation: stretch 10s ease 0s infinite normal;
 -webkit-animation: stretch 10s ease 0s infinite normal;
}
.shake40 {
 animation: shake 10s ease 0s infinite normal;
 -webkit-animation: shake 10s ease 0s infinite normal;
}
.move40 {
 animation: move 13s cubic-bezier(0.47, 0, 0.745, 0.715) 8s infinite normal;
 -webkit-animation: move 13s cubic-bezier(0.47, 0, 0.745, 0.715) 8s infinite normal;
}
.pos40 {
 left: 80%;
}
.scale40 {
 transform: scale(4);
 -webkit-transform: scale(4);
}
.stretch41 {
 animation: stretch 10.2s ease 0s infinite normal;
 -webkit-animation: stretch 10.2s ease 0s infinite normal;
}
.shake41 {
 animation: shake 10.2s ease 0s infinite normal;
 -webkit-animation: shake 10.2s ease 0s infinite normal;
}
.move41 {
 animation: move 13.2s cubic-bezier(0.47, 0, 0.745, 0.715) 8.2s infinite normal;
 -webkit-animation: move 13.2s cubic-bezier(0.47, 0, 0.745, 0.715) 8.2s infinite normal;
}
.pos41 {
 left: 82%;
}
.scale41 {
 transform: scale(4.1);
 -webkit-transform: scale(4.1);
}
.stretch42 {
 animation: stretch 10.4s ease 0s infinite normal;
 -webkit-animation: stretch 10.4s ease 0s infinite normal;
}
.shake42 {
 animation: shake 10.4s ease 0s infinite normal;
 -webkit-animation: shake 10.4s ease 0s infinite normal;
}
.move42 {
 animation: move 13.4s cubic-bezier(0.47, 0, 0.745, 0.715) 8.4s infinite normal;
 -webkit-animation: move 13.4s cubic-bezier(0.47, 0, 0.745, 0.715) 8.4s infinite normal;
}
.pos42 {
 left: 84%;
}
.scale42 {
 transform: scale(4.2);
 -webkit-transform: scale(4.2);
}
.stretch43 {
 animation: stretch 10.6s ease 0s infinite normal;
 -webkit-animation: stretch 10.6s ease 0s infinite normal;
}
.shake43 {
 animation: shake 10.6s ease 0s infinite normal;
 -webkit-animation: shake 10.6s ease 0s infinite normal;
}
.move43 {
 animation: move 13.6s cubic-bezier(0.47, 0, 0.745, 0.715) 8.6s infinite normal;
 -webkit-animation: move 13.6s cubic-bezier(0.47, 0, 0.745, 0.715) 8.6s infinite normal;
}
.pos43 {
 left: 86%;
}
.scale43 {
 transform: scale(4.3);
 -webkit-transform: scale(4.3);
}
.stretch44 {
 animation: stretch 10.8s ease 0s infinite normal;
 -webkit-animation: stretch 10.8s ease 0s infinite normal;
}
.shake44 {
 animation: shake 10.8s ease 0s infinite normal;
 -webkit-animation: shake 10.8s ease 0s infinite normal;
}
.move44 {
 animation: move 13.8s cubic-bezier(0.47, 0, 0.745, 0.715) 8.8s infinite normal;
 -webkit-animation: move 13.8s cubic-bezier(0.47, 0, 0.745, 0.715) 8.8s infinite normal;
}
.pos44 {
 left: 88%;
}
.scale44 {
 transform: scale(4.4);
 -webkit-transform: scale(4.4);
}
.stretch45 {
 animation: stretch 11s ease 0s infinite normal;
 -webkit-animation: stretch 11s ease 0s infinite normal;
}
.shake45 {
 animation: shake 11s ease 0s infinite normal;
 -webkit-animation: shake 11s ease 0s infinite normal;
}
.move45 {
 animation: move 14s cubic-bezier(0.47, 0, 0.745, 0.715) 9s infinite normal;
 -webkit-animation: move 14s cubic-bezier(0.47, 0, 0.745, 0.715) 9s infinite normal;
}
.pos45 {
 left: 90%;
}
.scale45 {
 transform: scale(4.5);
 -webkit-transform: scale(4.5);
}
.stretch46 {
 animation: stretch 11.2s ease 0s infinite normal;
 -webkit-animation: stretch 11.2s ease 0s infinite normal;
}
.shake46 {
 animation: shake 11.2s ease 0s infinite normal;
 -webkit-animation: shake 11.2s ease 0s infinite normal;
}
.move46 {
 animation: move 14.2s cubic-bezier(0.47, 0, 0.745, 0.715) 9.2s infinite normal;
 -webkit-animation: move 14.2s cubic-bezier(0.47, 0, 0.745, 0.715) 9.2s infinite normal;
}
.pos46 {
 left: 92%;
}
.scale46 {
 transform: scale(4.6);
 -webkit-transform: scale(4.6);
}
.stretch47 {
 animation: stretch 11.4s ease 0s infinite normal;
 -webkit-animation: stretch 11.4s ease 0s infinite normal;
}
.shake47 {
 animation: shake 11.4s ease 0s infinite normal;
 -webkit-animation: shake 11.4s ease 0s infinite normal;
}
.move47 {
 animation: move 14.4s cubic-bezier(0.47, 0, 0.745, 0.715) 9.4s infinite normal;
 -webkit-animation: move 14.4s cubic-bezier(0.47, 0, 0.745, 0.715) 9.4s infinite normal;
}
.pos47 {
 left: 94%;
}
.scale47 {
 transform: scale(4.7);
 -webkit-transform: scale(4.7);
}
.stretch48 {
 animation: stretch 11.6s ease 0s infinite normal;
 -webkit-animation: stretch 11.6s ease 0s infinite normal;
}
.shake48 {
 animation: shake 11.6s ease 0s infinite normal;
 -webkit-animation: shake 11.6s ease 0s infinite normal;
}
.move48 {
 animation: move 14.6s cubic-bezier(0.47, 0, 0.745, 0.715) 9.6s infinite normal;
 -webkit-animation: move 14.6s cubic-bezier(0.47, 0, 0.745, 0.715) 9.6s infinite normal;
}
.pos48 {
 left: 96%;
}
.scale48 {
 transform: scale(4.8);
 -webkit-transform: scale(4.8);
}
.stretch49 {
 animation: stretch 11.8s ease 0s infinite normal;
 -webkit-animation: stretch 11.8s ease 0s infinite normal;
}
.shake49 {
 animation: shake 11.8s ease 0s infinite normal;
 -webkit-animation: shake 11.8s ease 0s infinite normal;
}
.move49 {
 animation: move 14.8s cubic-bezier(0.47, 0, 0.745, 0.715) 9.8s infinite normal;
 -webkit-animation: move 14.8s cubic-bezier(0.47, 0, 0.745, 0.715) 9.8s infinite normal;
}
.pos49 {
 left: 98%;
}
.scale49 {
 transform: scale(4.9);
 -webkit-transform: scale(4.9);
}
.stretch50 {
 animation: stretch 12s ease 0s infinite normal;
 -webkit-animation: stretch 12s ease 0s infinite normal;
}
.shake50 {
 animation: shake 12s ease 0s infinite normal;
 -webkit-animation: shake 12s ease 0s infinite normal;
}
.move50 {
 animation: move 15s cubic-bezier(0.47, 0, 0.745, 0.715) 10s infinite normal;
 -webkit-animation: move 15s cubic-bezier(0.47, 0, 0.745, 0.715) 10s infinite normal;
}
.pos50 {
 left: 100%;
}
.scale50 {
 transform: scale(5);
 -webkit-transform: scale(5);
}

JS

jQueryでHTMLタグを量産します。

var winHeight;
var field = $(".field");
winRsize(); //関数の実行
$(window).resize(function() {
	winRsize(); //ブラウザのウィンドウサイズが変更されるたびに検知してリサイズ
});
function winRsize() {
	winHeight = $(window).height(); //ウィンドウの高さを取得
	field.height(winHeight); //ウィンドウの高さをfieldクラスの高さとする
}
var items = 50; //50個量産
for (var i=0; i<=items; i++) {
	var move = Math.ceil( Math.random()*50 );
	var pos = Math.ceil( Math.random()*50 );
	var scale = Math.ceil( Math.random()*10 );
	var stretch = Math.ceil( Math.random()*5 );
	var shake = Math.ceil( Math.random()*5 );
	field.append('
'); }

以下のサイトを参考にさせていただきました。

CSSアニメーションで水中の泡を表現する方法 | aekana
CSSアニメーションで水中の泡を表現する方法についての記事です。
CSS3(sass使用)と少しのJavascriptで泡のアニメーションをつくる。
CSS3のanimationを使用した泡がゆらゆら浮上するアニメーションデモです。

以上、ご参考になれば幸いです。

皆さまにすべてのよきことが雪崩のごとく起きますように。

CSS jQuery
スポンサーリンク
スポンサーリンク
J.をフォローする
スポンサーリンク
SEBLO

コメント

タイトルとURLをコピーしました