今回は、CSSで表現するアニメーションに関して解説します。まずは簡単な例を用いて説明します。
透明の設定ができる「opacity」のプロパティを使って点滅する簡単なアニメーションを作ります。
<div class="maru"></div>
.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%に変えて滑らかなループに変えてみます。
@keyframes lightup {
50% { opacity: 0;}
}
例2）点滅する赤い玉
上記と同じ効果を出す方法には animation-direction プロパティを用いて値に alternate を設定する方法もあります。
.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は本格的なアニメーション向き」と解釈します。