問題
23
HTML/CSS
要素を永遠に回転させよう
これまでの問題を通して、アニメーションスキルが高まってきているのではないかと思います。 今回は永遠に回転するアニメーションを作成します。ひとつひとつのプロパティの理解を深めていきましょう!
HTML/CSSの問題に挑戦しよう！
問題
「要素を永遠に回転させよう」
要素を永遠に回転させてみましょう!
動画を参考に実装してください。
あらかじめエディタに書くコード
<div></div>
¥HTML¥
期待する画面
解答と解説（要素を永遠に回転させよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
初級四十九と中級二十壱の合わせ技です。
永遠にアニメーションし続けるには
animationプロパティにinfiniteを指定してあげると実現できます。
補足
animationプロパティで設定できる値について解説しておきます。
animationで指定している要素は実は単体のプロパティをまとめて指定しています。
今回でいうとspinboxはanimation-nameプロパティの値で
その後の1sはanimation-durationプロパティの値になります。
このように個別のプロパティが纏められているのです。
指定する際に順番は基本的にありません。
少しルールがあったりするのでそのあたりは一度調べて理解しておきましょう。
永遠に回転する要素が作れるようになれば、ホームページなどでよくみる永遠に動き続けるスライダーも作れると思うので是非チャレンジしてみましょう。
