CSS アニメーションを実装する方法

以下の2通りのやり方がある。

1. transition
2. @keyframes

transition

transtionプロパティに指定可能な値の種類。

• transition-delay：変化までの待ち時間
• transition-duration：変化にかかる時間
• transiton-property：変化させるプロパティ名
• transition-timing-function：変化の仕方

上記４つの値を１つのショートハンドでかける。

transition: <property> <duration> <timing-function> <delay>;

例えば以下の例だと、「opacityプロパティに対して0.5秒かけて変化させる」と言う意味になる。

.link {
  transition: opacity .5s;
}

@keyframes

より複雑で自由度の高いアニメーションを実現するなら@keyframesを使用する。
@keyframesは、animationプロパティと一緒に使用する。

animationプロパティに指定可能な値の種類(よく使用するプロパティを抜粋)。

• animation-name：アニメーション名(@keyframesで定義した名前を指定)
• animation-duration：アニメーション1回の実行にかかる時間
• animation-iteration-count：アニメーションを繰り返す回数
• animation-delay：アニメーション実行までの待ち時間
• animation-timing-function：アニメーションの変化の仕方

animationプロパティは上記をショートハンドでかける。