CSS アニメーションの例(opacity編)

今回は、CSSで表現するアニメーションに関して解説します。まずは簡単な例を用いて説明します。

透明の設定ができる「opacity」のプロパティを使って点滅する簡単なアニメーションを作ります。

例1)点滅する赤い玉

上記の設定では、opacityが0から1へ変わるので、ループが滑らかではありません。下記のようにkeyframesの値を50%に変えて滑らかなループに変えてみます。

例2)点滅する赤い玉

上記と同じ効果を出す方法には animation-direction プロパティを用いて値に alternate を設定する方法もあります。

例3)点滅する赤い玉

transition(トランジション)とanimation(アニメーション)の違い

違いは以下の通りです。

「transitionは簡単なアニメーション向き、animationは本格的なアニメーション向き」と解釈します。

関連記事