問題
1
CSSアニメーション
ふわっと出現するアニメーションを作ろう
CSSアニメーションの問題に挑戦しよう！
問題
「ふわっと出現するアニメーションを作ろう」
今回は取り入れるとサイトでかなり目立つ部類のアニメーションです。
多くの人の目に留まるポイントかと思います。
あらかじめエディタに書くコード
<div class="box">
<p>回転します</p>
</div>
¥HTML¥
p{
background-color: #dddddd;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
}
¥CSS¥
期待する画面
解答と解説（ふわっと出現するアニメーションを作ろう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
keyframesによってアニメーションを定義し、それを使いたいところでanimationを使って適用させます。
keyframesを使わない方法もあります。例えば、よりシンプルにtransform、rotateをhover時の要素に適用し、transitionで時間を設定するなどです。回転途中で他の変化を入れたいときは今回の方がより汎用性が高いかと思います。
