content猿でも分かるCSSアニメーション指南書HTMLCSSHTML5CSS3animationはじめにCSSアニメーションの布教のために作りましたが、技術的にはまだまだ未熟ですので、ここで記述するよりもっと良い書き方などあるとは思いますが気にしたら負けです。何で負けたか明日まで考えといてください。『猿でもわかる』とある通り日本語を理解してタイピングの出来る猿ならとりあえず作れるような難易度にしました。CodePen.こちらの物を目標として作ります。CSSを記述できるテキストエディタ・WEBブラウザ・やる気と根気と色々ほんへ下準備animation.htmlanimation.cssという二つのファイルを作っておいてください。ファイル名は変えても構いませんが、その際はlinkタグなど変えておいてください。HTMLまずは基本の記述。href="animation.css"><title>Animation</title></head><body></body>これを書きます。VSCodeというエディタで出てきたものをそのまま使ってるだけなので多分不要なものとかありますが気にしないでください。linkタグを忘れて全く動かず首をかしげることがよくあるのでお忘れなく。class="anime5"></div>こういうdivを5つ作って下さい。このdivが五色の帯の基盤となります。classの名前は変えて構いませんが、その際は後述のCSSの記述も対応させてください。CSS脳筋コーダーのCSSです。基本的に「動けばヨシ!」の精神なので、8割方力技です。いうコードを書いてください。#df2781;}それでは一つずつ解説していきます。absolute;これは絶対配置と呼ばれる値です。絶対配置とは、数学の絶対値と同じです。今いる場所にかかわらず、原点からどれだけ離れた距離に配置されているのかを示します。この場合の原点はページ左上の頂点です。その頂点からどれだけ離れているかを指定できるようになります。auto;これは、potision:absolute;と併記することによって、縦横中央に要素を配置する事が出来るようになる構文です。100%;widthは幅。heightは高さの事です。ここで指定するのは最初のせり上がってくる線の状態なので、幅を10pxにしています。#df2781;このCSSアニメーションの本質は、divにbackground-colorをつけてそれを動かしているだけです。色は変えて頂いて構いません。CodePen.この状態で表示してみると、上のようにおそらく中央に赤色の線が入っている状態かと思います。違ったらどこかでミスってるのでコピペでもしてやり直してください。forwards;これを記述してください。一つずつ解説していきます。animation;これはアニメーションの名前を決めるタグです。いう名前になっています。変えていただいても構いませんが、後述の所も変えておいてください。1s;これは、アニメーションが開始するまでの時間を決めるものです。1秒後にアニメーションが開始します。1s;これは、アニメーションが始まってから終わるまでの秒数を決めるものです。要するにアニメーションにかける時間ですね。