ログイン
問題1

ふわっと出現するアニメーションを作ろう

アイコン画像

問題1:ふわっと出現するアニメーションを作ろう

今回は取り入れるとサイトでかなり目立つ部類のアニメーションです。
多くの人の目に留まるポイントかと思います。

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

                <div class="box">
  <p>回転します</p>
</div>
¥HTML¥
              
                p{
  background-color: #dddddd;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
¥CSS¥
              

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


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

              .box:hover p{
  animation:rotate 3s;
}
@keyframes rotate {
  0%{transform: rotate(0);}
  100%{transform: rotate(360deg);}
}
¥CSS¥
            

コメントのアイコン解説

keyframesによってアニメーションを定義し、それを使いたいところでanimationを使って適用させます。
keyframesを使わない方法もあります。例えば、よりシンプルにtransform、rotateをhover時の要素に適用し、transitionで時間を設定するなどです。回転途中で他の変化を入れたいときは今回の方がより汎用性が高いかと思います。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!

閉じる