【CSS小ネタ】ぐるんっ、と回転して出てくる文字
どうも！LSSです！！
今回はCSS小ネタとして、CSSアニメーションで「ぐるんっ、と回転して出てくる文字」を作ってみました。
ぐるんっ、と回転して出てくる文字
CSS面白いです^^
overflow:hidden;
で、こんな効果も！
コード
<style>
@keyframes rtxta{
0%,30%{transform:rotate(180deg);}
40%,60%{transform:rotate(0deg);}
70%,100%{transform:rotate(-180deg);}
}
.rtxtout{
position:relative;
overflow:hidden;
width:100%;
height:60px;
}
.rtxtin{
position:absolute;
left:10px;
top:0px;
font-size:30px;
transform-origin:-20px 50%;
animation:rtxta 10s linear infinite;
}
</style>
<div class="rtxtout"><span class="rtxtin">CSS面白いです^^</span></div>
<div class="rtxtout"><span class="rtxtin">overflow:hidden;</span></div>
<div class="rtxtout"><span class="rtxtin">で、こんな効果も！</span></div>
使い方
「コード」の内容をコピペして、赤文字部分を好きな言葉に置き換えてください。
ラスト３行、
<div class="rtxtout"><span class="rtxtin">文章</span></div>
の部分は行単位で減らしても増やしても動作します。
コード解説
今回のCSSは
「divタグの中にspanタグを入れ、divタグにoverflow:hidden;を指定する事で、『はみだした部分は表示させない』とした上で、内側にあるspanタグの内容を回転させる」
事で実現しています。
回転のアニメーションは
@keyframes rtxta{
0%,30%{transform:rotate(180deg);}
40%,60%{transform:rotate(0deg);}
70%,100%{transform:rotate(-180deg);}
}
で指定しています。
0%,30%{transform:rotate(180deg);}
180degは「通常位置から行の頭を中心に時計回りの方向に180度回転した位置」です。
アニメーション進行時間の0%から30%までは、そこで待機している事になります。
（これはdivタグの外側の位置になるので見えません。）
40%,60%{transform:rotate(0deg);}
アニメーション進行時間の40%から60%までは、「回転していない通常位置」で待機しています。
なので、30%から40%の間は、180degの位置から0degの位置までぐるんっと回転するアニメ―ションになるんですね。
70%,100%{transform:rotate(-180deg);}
-180degは「通常位置から行の頭を中心に反時計回りの方向に180度回転した位置」です。
アニメーション進行時間の70%から100%までは、そこで待機している事になります。
（これもdivタグの外側の位置になるので見えません。）
この%の数値を書き換えると、動作のタイミングを変更する事ができます^^
そうして指定した、アニメーション指定（キーフレーム）を、実際に呼び出しているのは
animation:rtxta 10s linear infinite;
の部分です。
動作にかける総時間を 10s（10秒）、全体的な進行速度は linear 、繰り返し回数はinfinite（無限）という指定になります。
あとがき
だいたい記事を書き終えたところで気づきましたが…
のネタとたいして変わらない内容になってしまったかも？^^;;;;;
keyframesについては、
【CSS】再び！キーフレームアニメーションについて - Little Strange Software
CSSでkeyframesのanimationをやってみた！ - Little Strange Software
でも解説しています。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
