CSSアニメーションの基本を抜粋

ドーモ！ぬま畑です！

今日はちょっと普段とかけ離れたお話。

今現在webプログラミングの勉強をしていて、何か記録を残したいなということでそれならそのままメモがてら勉強したことをブログに残していこうと思いました。

テーマとして何回続くかわからないですし結構な不定期ですが、少しずつ行っているのでそれの一環として勉強した内容をそのまま流用する形で載せていこうと思います。

ちなみに、参考書として使用したものがありまして記事やその他を彩るWeb上での動きを勉強できるデザインアイデアが詰まった一冊、『動くWebデザインアイディア帳』というものがあります。

それがこちら。

これからWebを学ぶという初心者や、思い出して使用するという上級者まで実践で使えるコード（サンプル）がびっしり書かれた良い本です。

今からwebプログラミングの勉強するぜ！と言う人はここの記事(シリーズ)でも勉強できるとは思いますが、あくまで僕用のメモなので実際に使用する場合はこの本の購入をおすすめします。

実際のコード等は時間がある時にショートコードのスポイラー等を使用して記載しますが、実際の中身を確認したいって人はソースコード表示とかPCでChromeブラウザ使用してるならF12、スマホの人は…そのスポイラーが記入されるまでお待ち下さいm(_ _)m

で、実際に移植して動かせるものは下記となります。

アニメーション1回分の時間の長さを指定したい
アニメーションの開始を遅らせたい
動きをループさせたい
アニメーションの進行具合を操作したい
アニメーションをまとめて設定する
実際のコード

アニメーション1回分の時間の長さを指定したい

0.5秒かけて変化

1秒かけて変化

1.5秒かけて変化

アニメーションの開始を遅らせたい

0.5秒後にアニメーション開始

1秒後にアニメーション開始

1.5秒後にアニメーション開始

動きをループさせたい

動きを2回繰り返す

動きを無限に繰り返す

アニメーションの進行具合を操作したい

開始時と終了時が緩やかに変化（ease）

開始時は緩やかに変化、終了に近づくと早く変化（ease-in）

開始時は早く変化し、終了時は緩やかに変化（ease-out）

開始時と終了時は、かなり緩やかに変化（ease-in-out）

開始から終了まで一定に変化（linear）

パラパラ漫画のように数値をコマ数で変化（steps）

変化の進行割合を3次ベジェ曲線で指定（cubic-bezier）

アニメーションをまとめて設定する

実際のコード

HTML

<p>アニメーション1回分の時間の長さを指定したい</p>
<div class=”flex”>
<div class=”change-time05 box fadeUp”>0.5秒かけて変化</div>
<div class=”change-time1 box fadeUp”>1秒かけて変化</div>
<div class=”change-time15 box fadeUp”>1.5秒かけて変化</div>
</div>

<p>アニメーションの開始を遅らせたい</p>
<div class=”flex”>
<div class=”delay-time05 box fadeUp”>0.5秒後にアニメーション開始</div>
<div class=”delay-time1 box fadeUp”>1秒後にアニメーション開始</div>
<div class=”delay-time15 box fadeUp”>1.5秒後にアニメーション開始</div>
</div>

<p>動きをループさせたい</p>
<div class=”flex”>
<div class=”count2 box fadeUp”>動きを2回繰り返す</div>
<div class=”countinfinite box fadeUp”>動きを無限に繰り返す</div>
</div>

<p>アニメーションの進行具合を操作したい</p>
<div class=”flex”>
<div class=”timing-ease box fadeUp”>開始時と終了時が緩やかに変化（ease）</div>
<div class=”timing-ease-in box fadeUp”>開始時は緩やかに変化、終了に近づくと早く変化（ease-in）</div>
<div class=”timing-ease-out box fadeUp”>開始時は早く変化し、終了時は緩やかに変化（ease-out）</div>
<div class=”timing-ease-in-out box fadeUp”>開始時と終了時は、かなり緩やかに変化（ease-in-out）</div>
<div class=”timing-linear box fadeUp”>開始から終了まで一定に変化（linear）</div>
<div class=”timing-steps box fadeUp”>パラパラ漫画のように数値をコマ数で変化（steps）</div>
<div class=”timing-cubic-bezier box fadeUp”>変化の進行割合を3次ベジェ曲線で指定（cubic-bezier）</div>
</div>

<p>アニメーションをまとめて設定するデモ</p>
<div class=”box fadeDown”>アニメーションをまとめて設定するデモ</div>

</div>

CSS

@charset “utf-8”;

.fadeUp {
animation-name: fadeUpAnime;/*アニメーションの定義名*/
animation-duration:1s;/*アニメーション変化時間 ※デフォルト*/
animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
opacity:0;
}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* アニメーション１回分の時間の長さを指定するCSS*/

.change-time05{
animation-duration: 0.5s;
}

.change-time1{
animation-duration: 1s;
}

.change-time15{
animation-duration: 1.5s;
}

.change-time2{
animation-duration: 2s;
}

.change-time25{
animation-duration: 2.5s;
}

/* 動きをループさせるCSS*/

.count2{
animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{
animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションの開始を遅らせるCSS*/

.delay-time05{
animation-delay: 0.5s;
}

.delay-time1{
animation-delay: 1s;
}

.delay-time15{
animation-delay: 1.5s;
}

.delay-time2{
animation-delay: 2s;
}

.delay-time25{
animation-delay: 2.5s;
}

/* アニメーションの進行具合を操作するCSS*/

.timing-ease{
animation-timing-function:ease;
}

.timing-ease-in{
animation-timing-function:ease-in;
}

.timing-ease-out{
animation-timing-function:ease-out;
}

.timing-ease-in-out{
animation-timing-function:ease-in-out;
}

.timing-linear{
animation-timing-function:linear;
}

.timing-steps{
animation-timing-function:steps(4, end);
}

.timing-cubic-bezier{
animation-timing-function:cubic-bezier(.17,.67,.67,.51);
}

/*==アニメーションをまとめて設定する==*/

.fadeDown{
animation: fadeDownAnime 1s ease 1.5s forwards;/*アニメーションの定義名、アニメーション１回分の時間の長さ、アニメーションの進行具合、アニメーションの開始を遅らせる、アニメーションの開始と終了時の状態を指定をまとめて設定*/
opacity:0;
}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeDownAnime{
from {
opacity: 0;
transform: translateY(-100px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/*========= レイアウトのためのCSS ===============*/

.wrapper{
overflow: hidden;
}

.flex{
display:flex;
flex-wrap: wrap;
}

.box{
width: 220px;
padding: 20px;
margin:0 20px 20px 0;
background: #666;
color: #fff;
box-sizing:border-box;
}

Javascript

今回はナシ

あとがき

いかがでしたでしょうか？

正直一瞬だけなのでスマホだと『え？これちゃんと動いてるの？』みたいになってわかりにくいです。

PCだとF5でページの更新とかスマホだとブラウザの更新をかけると見れますので動きを再度確認したいという方は更新をしてみてください。