問題
10
CSSアニメーション
動く縞模様を作ってみよう
CSSアニメーションの問題に挑戦しよう！
問題
「動く縞模様を作ってみよう」
今回はデモのような縞模様が流れているように見えるアニメーションを作りましょう！
あらかじめエディタに書くコード
<div class="stripe"></div>
¥HTML¥
.stripe{
width: 200px;
height: 50px;
border: 2px solid black;
}
¥CSS¥
期待する画面
解答と解説（動く縞模様を作ってみよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
今回は作るのが大変だったと思います。縞模様の作り方1の応用のようなものです。
repeat-linear-gradientの使い方はlinear-gradientと似たようなのですが、違う点はrepeat-linear-gradientの場合はbackground-sizeを指定しなくても最後の色に数値を与えてあげるとその長さで切ることができます。ちなみにanimationにlinearを与えるとアニメーションが終了してから次のアニメーションが始まるまでをなめらかにつなげてくれます。
