animation-directionという似た物があるので気をつけて下さい。forwards;これは、アニメーションの前後にどういう動きをするかを決めるものです。forwardsにするとアニメーションの最後の状態を維持してくれるとだけ覚えておけば大抵何でも出来ます。200%;に変えて下さい。CodePen.上にスペースを取ったことによって線が画面の外に出ました。スライドすると画面下に移動している事が分かると思います。これでアニメーションの基盤となるdivは完成です。次は実際にアニメーションをつけていきます。こちらのコードを書いてください。20%;}}一つずつ解説していきます。animation@keyframesとは、アニメーションのキーフレームを指定するタグです。あり良い説明も出来ないため、キーフレームに関しては適当にググって下さい。先ほどanimation-nameで付けた名前となります。変更した方はここも変えといて下さい。次にanimation.css0%{top:200%;}これは、アニメーション開始時の場所を指定するものです。アニメーションが開始するときは、top:200%;にいます。次に、animation.css45%{top:0%;}これは、アニメーションが始まって45%の時の場所を指定するものです。top:0%;にすることで、最初に見せたように画面の中央に線を置きます。top200%から0%への動きの間が補間されて動くことになります。次に、animation.css60%{top:0%;width:10px;}これは、アニメーションが始まって60%の時の場所を指定するものです。この時点では線は全く動いていません。ここでは線が静止してから幅が広がるまでの間を設定しています。最後に、animation.css100%{top:0%;width:20%;}これはアニメーションが始まって100%。アニメーションの終わった時の場所を指定するものです。widthを変えることによって線が広がり帯になりました。これでアニメーションは終わりです。CodePen.再生してみると、赤色の線が下から出てきて広がっています。最初に見せた完成例は帯が5色あります。先ほどの.anime1に対する記述を全てコピーペーストして同じ記述を5つにしましょう。あとは、classの名前の部分と色、横並びにするために配置を変えて終了です。変える部分は下の所です。animation.css.anime1right:0;background-color:#df2781;これらをそれぞれ上から、animatiion.css.anime1.anime2.anime3.anime4.anime5right:80%;right:40%;right:0%;right:-40%;right:-80%;background-color:#df2781;background-color:#f2c047;background-color:#c7d35e;background-color:#b980ae;background-color:#8fcdda;として下さい。CodePen.お疲れ様でした。これにてCSSアニメーションの完成です。最後に少し細かい部分を整えます。none;}まず、animation.cssoverflow:hidden;でスクロールを禁止しました。これを適用しなければ、アニメーションを待機している線がスライドで見えてしまいます。スクロール境界を越えてスクロールする事で画面外が見えるもの)を禁止しました。CodePen.これで本当に完成です。さいごにお疲れ様でした。わかりづらい説明で申し訳ありません。CSSに出来る事は無限にあります。