Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】回転+移動=渦巻き?【実験作】

 どうも!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アニメーションの解説に力を入れてみました。

 

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^