animation 「アニメーション」

「animation」は要素をアニメーション（指定した動き）に変化させる事が出来ます。
ちょっと面白いページの作成に便利な機能となします。

CSS Ver.	適用要素	継承
3.0	全要素	なし

animationの指定方法

プロパティ/設定値

意味

animation : [ルール名]
[変化時間]
[変化速度]
[変化開始時間]
[繰返し回数]
[終了後の動き]

まとめて指定（ショートハンド）の場合は
以下のプロパティー値をスペース区切りで指定する

animation-name : [ルール名]

アニメーションの動きを指定する「@keyframes」ルール名を指定する。
指定しない場合は「none」となる
「@keyframes」参照

animation-duration : [変化時間]

1回のアニメーション再生時間を秒単位で設定
指定しない場合は「0s」となる

animation-timing-function : [変化速度]

ease	開始と終了が滑らか
linear	一定速度
ease-in	開始ゆっくり
ease-out	終了ゆっくり
ease-in-out	開始終了ゆっくり
step-start	すぐに最終状態にする
step-end	最後に終了状態にする
steps(n, end)	n段階で変化する

指定しない場合は「ease」となる

animation-delay : [変化開始時間]

アニメーション開始までの時間を秒で指定。
指定しない場合は「0s」となる

animation-iteration-count : [繰返し回数]

アニメーションを繰り返す回数を設定

n	繰り返す回数
infinite	無限に繰り返す

指定しない場合は「1」となる

animation-direction : [終了後の動き]

1回のアニメーション終了後の動きを設定

normal	順方向
alternate	逆方向

指定しない場合は「normal」となる

デフォルト：「タグ毎のスタイル初期値」を参照

ページTOP

animation のサンプル


<style type="text/css">
.s1{
  animation-name           : sampleAnime;  /* ルール名 */
  animation-duration       : 5s;            /* 実行時間 */
  animation-timing-function: ease;          /* 動き速度 */
  animation-delay          : 1s;            /* 開始遅延時間 */
  animation-iteration-count: infinite;     /* 再生回数 */
  animation-direction      : alternate;    /* 終了後の動き */
  /* まとめて指定（ショートハンド）の場合は
  animation : sampleAnime 5s ease 1s infinite alternate; */

  width  : 50px;
  height : 50px;
  color  : blue;
  border :1px solid blue;
  background-color : lightcyan;
  transform : rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
@keyframes sampleAnime {
  100% {width  : 200px;
        height : 100px;
        color  :#fff;
        border :3px solid red;
        background-color : blue;
        transform : rotateX(360deg) rotateY(360deg) rotateZ(360deg);
       }
}
</style>

<!-- html -->
<div class="s1">ABC</div>

ABC

ページTOP

animation の自由に指定できるサンプル

<style type="text/css">
.s9{
  width            : 200px;
  height           : 100px;
  background-color : blue;
  color            : #fff;
  animation        : sample1Anime 下記参照
}
@keyframes sample1Anime{
  下記参照
}
</style>

<!-- html -->
<div class="s9" id="moveSample1">動的サンプル</div>

animationプロパティ	設定値
アニメーション	垂直横回転垂直縦回転「@keyframes」参照
animation-duration 【変化の時間】	0s
animation-timing-function 【変化速度】	指定なし開始終了滑らか一定速度開始ゆっくり終了ゆっくり開始終了ゆっくりすぐに最終状態最後に終了状態 4段階で変化
animation-delay 【変化開始時間】	0s
animation-iteration-count 【繰り返し回数】	無限
animation-direction 【終了後の動き】	完了後逆再生

↓上記条件でアニメーションが変化します。

動的サンプル

ページTOP

関連するCSS(STYLE)
animation-play-state	アニメーションの再生と一時停止
animation-fill-mode	アニメーションの再生前後のスタイル
keyframes	アニメーションの動きを指定
backface-visibility	裏面の表示
perspective	子要素の奥行きの指定
perspective-origin	子要素の奥行きのx軸・y軸方向の位置
transition	トランジションの設定
transition-delay	トランジションのディレイ
transition-duration	トランジションの再生時間
transition-property	トランジション対象のCSSプロパティ
transition-timing-function	トランジションの速度
animation-delay	アニメーションのディレイ
animation-direction	アニメーションの方向
animation-duration	アニメーションの再生時間
animation-iteration-count	アニメーションの繰り返し
animation-name	アニメーションのキーフレーム名
animation-timing-function	アニメーション速度