はじめに
CSSアニメーションの布教のために作りましたが、技術的にはまだまだ未熟ですので、ここで記述するよりもっと良い書き方などあるとは思いますが気にしたら負けです。何で負けたか明日まで考えといてください。また、『猿でもわかる』とある通り日本語を理解してタイピングの出来る猿ならとりあえず作れるような難易度にしました。
完成品
See the Pen 完成品-cssanimation by HATO (@hatopoppo) on CodePen.
こちらの物を目標として作ります。
必要な物
・HTML CSSの基本的な知識(無くても作れはする）
・パソコン
・HTML CSSを記述できるテキストエディタ
・WEBブラウザ
・やる気と根気と色々
ほんへ
下準備
animation.html
animation.css
という二つのファイルを作っておいてください。
ファイル名は変えても構いませんが、その際はlinkタグなど変えておいてください。
HTML
まずは基本の記述。HTMLの定型の
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="animation.css">
<title>Animation</title>
</head>
<body>
</body>
これを書きます。
VSCodeというエディタで出てきたものをそのまま使ってるだけなので多分不要なものとかありますが気にしないでください。
linkタグを忘れて全く動かず首をかしげることがよくあるのでお忘れなく。
次に上記のBodyタグに
<div class="anime1"></div>
<div class="anime2"></div>
<div class="anime3"></div>
<div class="anime4"></div>
<div class="anime5"></div>
こういうdivを5つ作って下さい。このdivが五色の帯の基盤となります。
classの名前は変えて構いませんが、その際は後述のCSSの記述も対応させてください。
CSS
脳筋コーダーのCSSです。基本的に「動けばヨシ！」の精神なので、8割方力技です。
まずはこういうコードを書いてください。
.anime1{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
width: 10px;
height: 100%;
background-color: #df2781;
}
それでは一つずつ解説していきます。
まず、
position: absolute;
これは絶対配置と呼ばれる値です。
絶対配置とは、数学の絶対値と同じです。今いる場所にかかわらず、原点からどれだけ離れた距離に配置されているのかを示します。
この場合の原点はページ左上の頂点です。
つまり、その頂点からどれだけ離れているかを指定できるようになります。
次に、
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
これは、potision:absolute;と併記することによって、縦横中央に要素を配置する事が出来るようになる構文です。便利。
次に
width: 10px;
height: 100%;
widthは幅。heightは高さの事です。ここで指定するのは最初のせり上がってくる線の状態なので、幅を10pxにしています。
最後に
background-color: #df2781;
このCSSアニメーションの本質は、divにbackground-colorをつけてそれを動かしているだけです。
勿論色は変えて頂いて構いません。
See the Pen PrPNmx by HATO (@hatopoppo) on CodePen.
この状態で表示してみると、上のようにおそらく中央に赤色の線が入っている状態かと思います。
違ったらどこかでミスってるのでコピペでもしてやり直してください。
次に、先ほどのanime1のタグに
animation-name: animation;
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode: forwards;
これを記述してください。
一つずつ解説していきます。
まず、
animation-name: animation;
これはアニメーションの名前を決めるタグです。今回は animation という名前になっています。変えていただいても構いませんが、後述の所も変えておいてください。
次に
animation-delay: 1s;
これは、アニメーションが開始するまでの時間を決めるものです。今回は1s。つまり1秒後にアニメーションが開始します。
次に
animation-duration: 1s;
これは、アニメーションが始まってから終わるまでの秒数を決めるものです。要するにアニメーションにかける時間ですね。
これも同じく1s。1秒です。
animation-directionという似た物があるので気をつけて下さい。
最後に
animation-fill-mode: forwards;
これは、アニメーションの前後にどういう動きをするかを決めるものです。
forwardsにするとアニメーションの最後の状態を維持してくれるとだけ覚えておけば大抵何でも出来ます。
次に、先ほどの記述を
top: 0;
から
top: 200%;
に変えて下さい。
See the Pen
ON THE WAY-cssanimation2 by HATO (@hatopoppo)
on CodePen.
上にスペースを取ったことによって線が画面の外に出ました。スライドすると画面下に移動している事が分かると思います。
これでアニメーションの基盤となるdivは完成です。次は実際にアニメーションをつけていきます。
まず、こちらのコードを書いてください。
@keyframes animation{
0%{
top:200%;
}
45%{
top:0%;
}
60%{
top: 0%;
width:10px;
}
100%{
top: 0%;
width: 20%;
}
}
一つずつ解説していきます。
まず
@keyframes animation
@keyframesとは、アニメーションのキーフレームを指定するタグです。
あり良い説明も出来ないため、キーフレームに関しては適当にググって下さい。
@keyframes の隣のanimation が、先ほどanimation-nameで付けた名前となります。変更した方はここも変えといて下さい。
次に
0%{
top:200%;
}
これは、アニメーション開始時の場所を指定するものです。アニメーションが開始するときは、top:200%;にいます。
次に、
45%{
top:0%;
}
これは、アニメーションが始まって45%の時の場所を指定するものです。top:0%;にすることで、最初に見せたように画面の中央に線を置きます。
top200%から0%への動きの間が補間されて動くことになります。
次に、
60%{
top:0%;
width:10px;
}
これは、アニメーションが始まって60%の時の場所を指定するものです。ですが、この時点では線は全く動いていません。
ここでは線が静止してから幅が広がるまでの間を設定しています。
最後に、
100%{
top:0%;
width:20%;
}
これはアニメーションが始まって100%。つまりアニメーションの終わった時の場所を指定するものです。widthを変えることによって線が広がり帯になりました。
これでアニメーションは終わりです。
See the Pen
ON THE WAY-cssanimation3 by HATO (@hatopoppo)
on CodePen.
再生してみると、赤色の線が下から出てきて広がっています。
ですが、最初に見せた完成例は帯が5色あります。
なので、先ほどの.anime1に対する記述を全てコピーペーストして同じ記述を5つにしましょう。
あとは、classの名前の部分と色、横並びにするために配置を変えて終了です。
変える部分は下の所です。
.anime1
right:0;
background-color:#df2781;
これらをそれぞれ上から、
.anime1
.anime2
.anime3
.anime4
.anime5
right:80%;
right:40%;
right:0%;
right:-40%;
right:-80%;
background-color:#df2781;
background-color:#f2c047;
background-color:#c7d35e;
background-color:#b980ae;
background-color:#8fcdda;
として下さい。
See the Pen
ON THE WAY-cssanimation4 by HATO (@hatopoppo)
on CodePen.
お疲れ様でした。これにてCSSアニメーションの完成です。
最後に少し細かい部分を整えます。
body{
overflow: hidden;
overscroll-behavior: none;
}
まず、
overflow:hidden;
でスクロールを禁止しました。これを適用しなければ、アニメーションを待機している線がスライドで見えてしまいます。
次に
overscroll-behavior:none;
でバウンススクロール（ スクロール境界を越えてスクロールする事で画面外が見えるもの)を禁止しました。
See the Pen
FIN-cssanimation by HATO (@hatopoppo)
on CodePen.
これで本当に完成です。お疲れ様でした。
さいごに
お疲れ様でした。わかりづらい説明で申し訳ありません。
CSSに出来る事は無限にあります。
例えば横スライダー。例えばトグルメニュー。全てCSSで実装が可能です。
それらをもっと短いコードで書くものがJSであると捉えています。
このアニメーションもJSで作る事は可能です。
ですが、JSよりもCSSの方がもっと簡単でわかりやすいコードでかけます。
何を言っているのかよく分からなくなりましたが、要するに、
CSSはいいぞ
CSSの完成品を上げておきます
完成版CSS
.anime1{
animation-name: animation;
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode: forwards;
position: absolute;
top: 200%;
right:80%;
left: 0;
bottom: 0;
margin: auto;
width: 10px;
height: 100%;
background-color: #df2781;
}
.anime2{
animation-name: animation;
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode: forwards;
position: absolute;
top: 200%;
right: 40%;
left: 0;
bottom: 0;
margin: auto;
width: 10px;
height: 100%;
background-color: #f2c047;
}
.anime3{
animation-name: animation;
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode: forwards;
position: absolute;
top: 200%;
right:0;
left: 0;
bottom: 0;
margin: auto;
width: 10px;
height: 100%;
background-color: #c7d35e;
}
.anime4{
animation-name: animation;
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode: forwards;
position: absolute;
top: 200%;
right: -40%;
left: 0;
bottom: 0;
margin: auto;
width: 10px;
height: 100%;
background-color: #b980ae;
}
.anime5{
animation-name: animation;
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode: forwards;
position: absolute;
top: 200%;
right: -80%;
left: 0;
bottom: 0;
margin: auto;
width: 10px;
height: 100%;
background-color: #8fcdda;
}
body{
overflow: hidden;
overscroll-behavior: none;
}
@keyframes animation{
0%{
top:200%;
}
45%{
top:0%;
}
60%{
top: 0%;
width:10px;
}
100%{
top: 0%;
width: 20%;
}
}
追記
19/6/14のデイリーいいね数ランキング8位。
19/6/7~19/6/14のウィークリーストック数56位。
初記事としてはまずまずかと思います。
ありがとうございました。
コード大幅短縮
CSSの学習を続けるうちに、コードを大幅に短縮出来ることに気がついたので軽くCSSだけ載せておきます。
HTMLは、anime1~5をwrapperというdivクラスで囲っただけなので省略させて頂きます。
短縮版コード
body{
margin: 0;
overflow: hidden;
overscroll-behavior: none;
}
.wrapper{
display: flex;
}
.wrapper > *{
animation-name: animation;
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode: forwards;
width: 20vw;
height: 100vh;
margin: 0 calc(10vw - 5px);
margin-top: 100vh;
}
.anime1{
background-color: #df2781;
}
.anime2{
background-color: #f2c047;
}
.anime3{
background-color: #c7d35e;
}
.anime4{
background-color: #b980ae;
}
.anime5{
background-color: #8fcdda;
}
@keyframes animation{
0%{
margin-top :100vh;
}
45%{
margin-top :0;
}
60%{
margin: 0 calc(10vw - 5px);
}
100%{
margin: 0;
}
}