どうも！LSSです！！
だいぶ以前から、CSSのkeyframesを使ったアニメーションを色々試していましたが、最近になって「え、こんなの出来るんだ！？」と知ったものがありますｗ
カチコチ動くアニメーション
60秒で一周します。
コード
<style>
@keyframes anmstpa{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.anmstp{
display:inline-block;
transform-origin:100% 50%;
animation:anmstpa 60s steps(60,end) 0s infinite;
}
</style>
<p><span class="anmstp">60秒で一周します。</span></p>
animation-timing-functionの「steps」
コード中、赤字で書いた、
steps(60,end)
という記述。
ここは普段、linearやeaseなどを入れていた箇所ですが、そこに入る候補の中にこの「steps」というのがあったんですね。
今回のサンプルで「60」と指定した部分が「60段階に区切る」という意味で、
animation:anmstpa 60s steps(60,end) 0s infinite;
「60秒かけて再生するアニメーションを60段階に区切る」という指定にしています。
この部分を今まで通り「linear」にしておくと、滑らかに動く事になりますが、敢えてカクカクした動きにしたい時に使えますね^^
これまで作ってきたkeyframesを使ったアニメーションも、stepsに置き換えるとまた一味違った面白い動きになるのかも？ｗ
keyframes の検索結果 - Little Strange Software
アニメーションでありながら、あえてアニメーションらしい滑らかな動きを捨てるという、変わった指定ですねｗ
ちなみに…
と動きは似ていますが、アナログ時計はJavaScriptのタイマーで作った動きで、この時はstepsを使っていません。
その記事のコメント欄に、
といただいたのですが、秒針のような動きだけなら、JavaScriptを使わずCSSだけでできますね^^
421miyako様、コメントありがとうございます^^
※ついでの余談。そのアナログ時計ですが、今日ちょっと追記してコード修正しました。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
長針短針をなくす又は地と同じ色にして見えなくして秒針を貼りじゃなく何かの形にしてぐるぐる回すと面白いかも・・・と言いつつやらないと思います。