どうも!LSSです!!
ちょっとした思いつきで作ったCSSアニメーションです。
渦巻きアニメーション
文の頭につけたマークが渦を巻いて回転するアニメーション
コード
<style><!--
@keyframes bfrnda{
0%,30%{transform:rotate(0deg) translateX(0px);}
65%{transform:rotate(900deg) translateX(70px);}
100%{transform:rotate(1800deg) translateX(0px);}
}
.bfrnd:before{
content:"*";
display:inline-block;
transform-origin:0% 50%;
animation:bfrnda 8s linear 0s infinite;
}
--></style>
<p class="bfrnd">文の頭につけたマークが渦を巻いて回転するアニメーション</p>
コード解説
.bfrnd:before{
content:"*";
display:inline-block;
transform-origin:0% 50%;
animation:bfrnda 8s linear 0s infinite;
}
「bfrnd」と名付けたクラスの「:before」要素に対する指定です。
content:"*";
で「文頭に*という文字をつける」
display:inline-block;
inline-blockまたはblock要素にしておく必要があります。
transform-origin:0% 50%;
回転などの動きの中心となる位置を指定しています。
横位置0%(左端)、縦位置50%(上下中央)を指定した事になります。
animation:bfrnda 8s linear 0s infinite;
「bfrnda」と名付けたキーフレームアニメーションを、
「8s」8秒かけて、
「linear」速度変化は均等に、
「0s」開始までの待ち時間は0秒で、
「infinite」無限に繰り返す、という指定になっています。
その「bfrnda」というキーフレームアニメーションは、
@keyframes bfrnda{
0%,30%{transform:rotate(0deg) translateX(0px);}
65%{transform:rotate(900deg) translateX(70px);}
100%{transform:rotate(1800deg) translateX(0px);}
}
再生に要する時間(8秒)のうち、
0%,30%{transform:rotate(0deg) translateX(0px);}
0%(開始直後)と30%(8秒の30%で2.4秒)の時点では、
「rotate(0deg)」=0度の回転=つまり回転していない初期状態、
「translateX(0px)」=右に0ピクセルずらした位置=つまり移動していない状態
となるように指定しています。
つまり、開始から2.4秒までは何も変化のない状態を保ちます。
65%{transform:rotate(900deg) translateX(70px);}
65%(8秒の65%で5.2秒)の時点では、
「rotate(900deg)」=900度の回転=2周半回転した状態、
「translateX(70px)」=右に70ピクセルずらした位置、
となるように指定しています。
これにより2.4秒から5.2秒の間に回転と移動が同時に行われます。
移動しても、回転の中心軸は「元の位置の左端」のままなので、「元の位置から距離を広げながら回転する動き」となり、渦巻きのような動きになるんですね。
100%{transform:rotate(1800deg) translateX(0px);}
100%(8秒後)の時点では、
「rotate(1800deg)」=1800度の回転=360×5=ちょうど5周回転した状態、
「translateX(0px)」=右に0ピクセルずらした位置=つまり移動していない状態
と指定しています。
これにより「5.2秒から8秒まで」の間は「2周半した状態からさらに同じ方向にもう2周半しつつ、ずれた位置は元の位置に戻ろうとする」アニメーションになります。
あとがき
transformプロパティは、回転・移動・拡大縮小など、様々な「変形」効果をかけられますが、こうして組み合わせてみる事でも新たな動きが生まれますね^^
あ、ついでに拡大縮小も入れてみると、
こんな風にもできます。
コード
<style><!--
@keyframes bfrnda2{
0%,30%{transform:rotate(0deg) translateX(0px) scale(1);}
65%{transform:rotate(900deg) translateX(70px) scale(5);}
100%{transform:rotate(1800deg) translateX(0px) scale(1);}
}
.bfrnd2:before{
content:"※";
display:inline-block;
transform-origin:0% 50%;
animation:bfrnda2 8s linear 0s infinite;
}
--></style>
<p class="bfrnd2">こんな風にもできます。</p>
サンプルとしてはどうかな?と思われる出来ですがw
CSSのkeyframesアニメーションの解説に力を入れてみました。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^