Help us understand the problem. What is going on with this article?

猿でも分かるCSSアニメーション指南書

More than 1 year has passed since last update.

はじめに

CSSアニメーションの布教のために作りましたが、技術的にはまだまだ未熟ですので、ここで記述するよりもっと良い書き方などあるとは思いますが気にしたら負けです。何で負けたか明日まで考えといてください。また、『猿でもわかる』とある通り日本語を理解してタイピングの出来る猿ならとりあえず作れるような難易度にしました。

完成品

See the Pen 完成品-cssanimation by HATO (@hatopoppo) on CodePen.

こちらの物を目標として作ります。

必要な物

・HTML CSSの基本的な知識(無くても作れはする)
・パソコン
・HTML CSSを記述できるテキストエディタ
・WEBブラウザ
・やる気と根気と色々

ほんへ

下準備

animation.html
animation.css
という二つのファイルを作っておいてください。
ファイル名は変えても構いませんが、その際はlinkタグなど変えておいてください。

HTML

まずは基本の記述。HTMLの定型の

animation.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タグに

animation.html
<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割方力技です。

まずはこういうコードを書いてください。

animation.css
.anime1{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0; 
margin: auto;
width: 10px;
height: 100%;
background-color: #df2781;
}

それでは一つずつ解説していきます。

まず、

animation.css
position: absolute;

これは絶対配置と呼ばれる値です。
絶対配置とは、数学の絶対値と同じです。今いる場所にかかわらず、原点からどれだけ離れた距離に配置されているのかを示します。
この場合の原点はページ左上の頂点です。
つまり、その頂点からどれだけ離れているかを指定できるようになります。

次に、

animation.css
top: 0;
right: 0;
left: 0;
bottom: 0; 
margin: auto;

これは、potision:absolute;と併記することによって、縦横中央に要素を配置する事が出来るようになる構文です。便利。

次に

animation.css
width: 10px;
height: 100%;

widthは幅。heightは高さの事です。ここで指定するのは最初のせり上がってくる線の状態なので、幅を10pxにしています。

最後に

animation.css
background-color: #df2781;

このCSSアニメーションの本質は、divにbackground-colorをつけてそれを動かしているだけです。
勿論色は変えて頂いて構いません。

See the Pen PrPNmx by HATO (@hatopoppo) on CodePen.

この状態で表示してみると、上のようにおそらく中央に赤色の線が入っている状態かと思います。
違ったらどこかでミスってるのでコピペでもしてやり直してください。

次に、先ほどのanime1のタグに

animation.css
animation-name: animation;
animation-delay: 1s;
animation-duration: 1s;
animation-fill-mode: forwards;

これを記述してください。
一つずつ解説していきます。

まず、

animation.css
animation-name: animation;

これはアニメーションの名前を決めるタグです。今回は animation という名前になっています。変えていただいても構いませんが、後述の所も変えておいてください。

次に

animation.css
animation-delay: 1s;

これは、アニメーションが開始するまでの時間を決めるものです。今回は1s。つまり1秒後にアニメーションが開始します。

次に

animation.css
animation-duration: 1s;

これは、アニメーションが始まってから終わるまでの秒数を決めるものです。要するにアニメーションにかける時間ですね。
これも同じく1s。1秒です。
animation-directionという似た物があるので気をつけて下さい。

最後に

animation.css
animation-fill-mode: forwards;

これは、アニメーションの前後にどういう動きをするかを決めるものです。
forwardsにするとアニメーションの最後の状態を維持してくれるとだけ覚えておけば大抵何でも出来ます。

次に、先ほどの記述を

animation.css
top: 0;

から

animation.css
top: 200%;

に変えて下さい。


See the Pen
ON THE WAY-cssanimation2
by HATO (@hatopoppo)
on CodePen.



上にスペースを取ったことによって線が画面の外に出ました。スライドすると画面下に移動している事が分かると思います。
これでアニメーションの基盤となるdivは完成です。次は実際にアニメーションをつけていきます。

まず、こちらのコードを書いてください。

animation.css
@keyframes animation{
0%{
top:200%;
}
45%{
top:0%;
}
60%{
top: 0%;
width:10px;
}
100%{
top: 0%;
width: 20%;
}
}

一つずつ解説していきます。

まず

animation.css
@keyframes animation

@keyframesとは、アニメーションのキーフレームを指定するタグです。
あり良い説明も出来ないため、キーフレームに関しては適当にググって下さい。
@keyframes の隣のanimation が、先ほどanimation-nameで付けた名前となります。変更した方はここも変えといて下さい。

次に

animation.css
0%{
top:200%;
}

これは、アニメーション開始時の場所を指定するものです。アニメーションが開始するときは、top:200%;にいます。

次に、

animation.css
45%{
top:0%;
}

これは、アニメーションが始まって45%の時の場所を指定するものです。top:0%;にすることで、最初に見せたように画面の中央に線を置きます。
top200%から0%への動きの間が補間されて動くことになります。

次に、

animation.css
60%{
top:0%;
width:10px;
}

これは、アニメーションが始まって60%の時の場所を指定するものです。ですが、この時点では線は全く動いていません。
ここでは線が静止してから幅が広がるまでの間を設定しています。

最後に、

animation.css
100%{
top:0%;
width:20%;
}

これはアニメーションが始まって100%。つまりアニメーションの終わった時の場所を指定するものです。widthを変えることによって線が広がり帯になりました。

これでアニメーションは終わりです。


See the Pen
ON THE WAY-cssanimation3
by HATO (@hatopoppo)
on CodePen.



再生してみると、赤色の線が下から出てきて広がっています。

ですが、最初に見せた完成例は帯が5色あります。
なので、先ほどの.anime1に対する記述を全てコピーペーストして同じ記述を5つにしましょう。

あとは、classの名前の部分と色、横並びにするために配置を変えて終了です。
変える部分は下の所です。

animation.css
.anime1
right:0;
background-color:#df2781;

これらをそれぞれ上から、

animatiion.css
.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アニメーションの完成です。

最後に少し細かい部分を整えます。

animation.css
body{
overflow: hidden;
overscroll-behavior: none;
}

まず、

animation.css
overflow:hidden;

でスクロールを禁止しました。これを適用しなければ、アニメーションを待機している線がスライドで見えてしまいます。

次に

animation.css
overscroll-behavior:none;

でバウンススクロール( スクロール境界を越えてスクロールする事で画面外が見えるもの)を禁止しました。


See the Pen
FIN-cssanimation
by HATO (@hatopoppo)
on CodePen.



これで本当に完成です。お疲れ様でした。

さいごに

お疲れ様でした。わかりづらい説明で申し訳ありません。

CSSに出来る事は無限にあります。
例えば横スライダー。例えばトグルメニュー。全てCSSで実装が可能です。
それらをもっと短いコードで書くものがJSであると捉えています。
このアニメーションもJSで作る事は可能です。
ですが、JSよりもCSSの方がもっと簡単でわかりやすいコードでかけます。
何を言っているのかよく分からなくなりましたが、要するに、
CSSはいいぞ

CSSの完成品を上げておきます

完成版CSS
animation.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クラスで囲っただけなので省略させて頂きます。

短縮版コード
animation.css
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;
    }
  }


hato-poppo
N高でWEBの勉強を始めた4期生です。備忘録的に活用します。
https://hatopoppo.studio/
nnn-school
IT×グローバル社会を生き抜く“創造力”を身につけ、世界で活躍する人材を育成する。
https://nnn.ed.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away