忍者CODE

ログイン

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

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
要素を永遠に回転させよう!

動画を参考に実装してください。
自分の環境に書くコード
            <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¥
          
答えのアイコン

解説

初級その49とその中級21の合わせ技です。

永遠にアニメーションし続けるには
animationプロパティにinfiniteを指定してあげると実現できます。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET