ログイン
問題23

要素を永遠に回転させよう

これまでの問題を通して、アニメーションスキルが高まってきているのではないかと思います。 今回は永遠に回転するアニメーションを作成します。ひとつひとつのプロパティの理解を深めていきましょう!

アイコン画像

問題23:要素を永遠に回転させよう

要素を永遠に回転させてみましょう!

動画を参考に実装してください。

エディターのアイコンあらかじめエディタに書くコード

                <div></div>
¥HTML¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              <div></div>
¥HTML¥
            
              @keyframes spinbox {
  0% {
    transform:rotate(0deg); 
  }
  100% {
    transform:rotate(180deg); 
  }
}
div {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  background-color: red;
  margin-top: 100px;
  animation: spinbox 1s linear 0s infinite forwards;
}
¥CSS¥
            

コメントのアイコン解説

初級四十九と中級二十壱の合わせ技です。

永遠にアニメーションし続けるには
animationプロパティにinfiniteを指定してあげると実現できます。
ログインして解答を見る

コメントのアイコン補足

animationプロパティで設定できる値について解説しておきます。

animationで指定している要素は実は単体のプロパティをまとめて指定しています。
今回でいうとspinboxはanimation-nameプロパティの値で
その後の1sはanimation-durationプロパティの値になります。
このように個別のプロパティが纏められているのです。

指定する際に順番は基本的にありません。
少しルールがあったりするのでそのあたりは一度調べて理解しておきましょう。

永遠に回転する要素が作れるようになれば、ホームページなどでよくみる永遠に動き続けるスライダーも作れると思うので是非チャレンジしてみましょう。
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!

閉じる