【CSS】アニメーション

CSS

2021/04/13

アニメーションとは

アニメーションとは、プロパティの変化をどのタイミングで、どのくらいの速度で、どのように変化させるかを決めます。

以下はホバーした時にプロパティが変化する例です。

CSS

.elm {
  background: red;
  width: 100px;
}
.elm:hover {
  background: blue;
  width: 200px;
}

アニメーションなし

アニメーションあり

アニメーション用のプロパティにはtransitionとanimationの 2 種類あります。基本的なアニメーションは、JavaScript は使わずとも、この 2 つのプロパティで設定することができます。

transition

transitionは簡易的なアニメーションの設定ができます。例えばボタンがホバーされたときの色の変化などに使用されます。

transitionでは以下のプロパティを組み合わせてアニメーションを設定します。

transition-property

アニメーションを適用するプロパティを指定します。例えば最初のホバーのアニメーションを背景色（background）のみ適用します。

CSS

.elm {
  background: red;
  width: 100px;
  transition-property: background;
}
.elm:hover {
  background: blue;
  width: 200px;
}

すべてのプロパティに適用したい場合はtransition-property: allと指定します。

transition-duration

プロパティの変化にかかる時間を指定します。

CSS

.elm {
  background: red;
  width: 100px;
  transition-property: all;
  transition-duration: 1s;
}
.elm:hover {
  background: blue;
  width: 200px;
}

0.5s

transition-timing-function

プロパティが時間と共にどのように変化するかを指定します。

プロパティ値には、滑らかに変化するcubic-bezierと段階的に変化するstepsがあります。

cubic-bezier

cubic-bezierは、プロパティがどのような速さで変化するかを、4 つの数値を用いたベジェ曲線を基に表現します。ベジェ曲線についてはこちらを参考にしてください。

cubic-bezierでは、linear、ease、ease-out、ease-in-out、ease-inとあらかじめ数値が決められたものを使用することができます。それぞれの動きについては以下のプレビューを参考にしてください。

CSS

.elm {
  background: red;
  width: 100px;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
}
.elm:hover {
  background: blue;
  width: 200px;
}

cubic-bezier(0.25, 0.5, 0.75, 1.0)

linear | cubic-bezier(0.0, 0.0, 1.0, 1.0)

ease | cubic-bezier(0.25, 0.1, 0.25, 1.0)

ease-out | cubic-bezier(0.0, 0.0, 0.58, 1.0)

ease-in-out | cubic-bezier(0.42, 0.0, 0.58, 1.0)

ease-in | cubic-bezier(0.42, 0.0, 1.0, 1.0)

steps

stepsは指定した回数で段階的にプロパティを変化させます。また開始と終了の状態を省略するか（ジャンプ）を指定します。

ジャンプには以下のものがあります。動きについてはプレビューを参考にしてください。

ジャンプ	開始	終了
`jump-none`	-	-
`jump-start`	省略	-
`jump-end`	-	省略
`jump-both`	省略	省略

CSS

.elm {
  background: red;
  width: 100px;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: steps(5, jump-none);
}
.elm:hover {
  background: blue;
  width: 200px;
}

steps(5, jump-none)

steps(5, jump-start)

steps(5, jump-end)

steps(5, jump-both)

step-start | steps(1, jump-start)

step-end | steps(1, jump-end)

transition-delay

プロパティの変化が開始するまでの待ち時間を指定します。

CSS

.elm {
  background: red;
  width: 100px;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease;
  transition-delay: 1s;
}
.elm:hover {
  background: blue;
  width: 200px;
}

delay: なし

delay: 1s

一括指定

上記 4 つのプロパティはtransitionプロパティでまとめて指定することができます。

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

propertyとdurationは必須で、その他は省略することができます。

animation

animationプロパティは、transitionよりも詳細な状態の変化などを表現することができます。

keyframes

keyframesは、アニメーションの段階によってどのようにプロパティが変化するかを定義します。

@keyframes キーフレーム名として宣言し、段階は%で表現します。

CSS

@keyframes animation1 {
  0% {
    background: red;
  }
  25% {
    background: yellow
  },
  50% {
    background: green;
  }
  75% {
    background: blue;
  }
  100% {
    background: red;
  }
}

animation-name

使用するkeyframesを指定します。

CSS

.elm {
  animation-name: animation1;
}

animation-duration

transition-durationと同じ説明のため割愛します。

CSS

.elm {
  animation-name: animation1;
  animation-duration: 4s;
}

animation-timing-function

transition-timing-functionと同じ説明のため割愛します。

CSS

.elm {
  animation-name: animation1;
  animation-duration: 4s;
  animation-timing-function: ease;
}

animatino-delay

transition-delayと同じ説明のため割愛します。

CSS

.elm {
  animation-name: animation1;
  animation-duration: 4s;
  animation-timing-function: ease;
  animation-delay: 1s;
}

animation-iteration-count

アニメーションを何回繰り返すかを指定します。

animation-iteration-count: 2とすれば 2 回、animation-iteration-count: 1.5とすれば 1 回半アニメーションが実行されます。

またinfiniteを指定することで永続的に実行することができます。

CSS

.elm {
  animation-name: animation1;
  animation-duration: 4s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

animation-direction

アニメーションの再生開始時の方向と次回再生時の方向転換を指定します。プロパティ値には以下のものがあります。

言葉ではわかりにくいと思うのでプレビューを参考にしてください。

プロパティ値	再生開始時の方向	次回再生時の方向転換
`normal`	順方向	転換なし
`reverse`	逆方向	転換なし
`alternate`	順方向	転換あり
`alternate-reverse`	逆方向	転換あり

CSS

.elm {
  animation-name: animation1;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: normal;
}

normal

reverse

alternate

alternate-reverse

animation-fill-mode

アニメーションのdelay中と終了後に、アニメーションのスタイルを適用するかを指定します。

プロパティ値には以下のものがあります。

プロパティ値	`delay`	終了後
`none`	-	-
`forwards`	-	適用する
`backwards`	適用する	-
`both`	適用する	適用する

CSS

.elm {
  animation-name: animation1;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: none;
}

none

forwards

backwards

both

animation-play-state

アニメーションの実行状態を指定します。 runningとすると実行中、pausedとすると停止中になります。

CSS

.elm {
  animation-name: animation1;
  animation-duration: 4s;
  animation-play-state: running;
}

一括指定

上記のアニメーションプロパティは、animationプロパティによってまとめて指定できます。

animation: <name> <duration> <timing-function> <delay> <iteration-count>
  <direction> <fill-mode> <play-state>;

nameはどの位置で指定しても動作します。最低限nameとdurationの指定が必要になります。

【CSS】文字に関するプロパティ

CSS

2021/05/31

【CSS】backgroundによる画像の読み込み

【CSS】transformによる要素変換

アニメーションとは transition transition-property transition-duration transition-timing-function transition-delay 一括指定 animation keyframes animation-name animation-duration animation-timing-function animatino-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state 一括指定