@ CSS

animation プロパティ

animation は、アニメーション関連のプロパティを一括して指定できるプロパティです。

format

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

animation プロパティの subproperty は下記のとおりです。

  • animation-name:アニメーションのキーフレームを示す @keyframes 規則の名前。
  • animation-duration:アニメーションの再生時間。
  • animation-timing-function:アニメーションの実行速度のパターン。
  • animation-delay:アニメーションを開始するまでの時間。
  • animation-iteration-count:アニメーションを繰り返す回数。
  • animation-direction:アニメーションを繰り返す方向。

example

animation: anime2 2s ease 0s infinite alternate;
実行速度のパターンに指定できる値
実行速度のパターン 説明
ease ゆっくり加速、ゆっくり減速する
linear 一定の割合で変化する
ease-in ゆっくり加速する
ease-out ゆっくり減速する
ease-in-out 最初と最後の変化を穏やかにする
繰り返し回数の値
繰り返し回数 説明
数値 数値で再生回数を指定する(初期値は1)
infinite 無限
繰り返し方向の値
繰り返し方向 説明
normal 通常の方向
alternate 偶数回は逆向きで実行

次の例では文字列がブラウザのウィンドウ右端から左端にスライドするアニメーションを h1 要素へ設定しています。

property_animation_01

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
h1 {
  animation: slidein 10s;
}
@keyframes slidein {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}
</style>
</head>

<body>
  <h1>slide</h1>
</body>

<html>

demo

キーフレームを使ったアニメーションの流れの定義

@keyframes を使って 2 つまたはそれ以上のキーフレームを定義することでアニメーションの流れを指定することができます。各キーフレームは、アニメーションの流れの中で要素がどのように表現されるかを記述します。

format

@keyframes 適用するキーフレーム名 {
 0% {
   ...
 }
 100% {
   ...
 }
}

キーフレームのセレクタはパーセンテージ、0%(代替表記 from) または 100%(代替表記 to) で記述します。これらはカンマ区切りにより複数指定が可能です。

次の例では、アニメーションの流れの 75% 経過時点で<h1>の左マージンを 25% に、文字のサイズを 500% にするよう設定します。また、再生回数を infinite、繰り返す方向を alternate とします。

property_animation_02

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
h1 {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes slidein {
  0% {
    margin-left: 100%;
  }
  75% {
    font-size: 500%;
    margin-left: 25%;
  }
  100% {
    margin-left: 0%;
  }
}
</style>
</head>

<body>
  <h1>slide</h1>
</body>

</html>

demo

CSS アニメーション – CSS | MDN