今回は、CSSで表現するアニメーションに関して解説します。まずは簡単な例を用いて説明します。
透明の設定ができる「opacity」のプロパティを使って点滅する簡単なアニメーションを作ります。
|
1 |
<div class="maru"></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.maru { width: 100px; height: 100px; border-radius: 50%; background-color: #c00; animation-name: lightup; animation-duration: 3s; animation-timing-function: ease-out; animation-iteration-count: infinite; margin-bottom: 20px; } @keyframes lightup { 100% { opacity: 0;} } |
例1）点滅する赤い玉
上記の設定では、opacityが0から1へ変わるので、ループが滑らかではありません。下記のようにkeyframesの値を50%に変えて滑らかなループに変えてみます。
|
1 2 3 |
@keyframes lightup { 50% { opacity: 0;} } |
例2）点滅する赤い玉
上記と同じ効果を出す方法には animation-direction プロパティを用いて値に alternate を設定する方法もあります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.maru03 { width: 100px; height: 100px; border-radius: 50%; background-color: #c00; animation-name: lightup03; animation-duration: 1.5s; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-direction: alternate; margin-bottom: 20px; } @keyframes lightup { 100% { opacity: 0;} } |
例3）点滅する赤い玉
transition（トランジション）とanimation（アニメーション）の違い
違いは以下の通りです。
- ●transitionが:hoverなどの疑似クラスよるきっかけが必要なのに対し、animationは設定が可能
- ●transitionでは実行後に元のプロパティ値に戻る
- ●animationでは細かい設定が可能
「transitionは簡単なアニメーション向き、animationは本格的なアニメーション向き」と解釈します。