【CSS3】animationの各プロパティについて

animationで設定するアニメーション本体は@keyframesに記述します。animationはその@keyframesの名前を設定するだけです。

名前のほかにも、アニメーションの大枠の設定を行うのが「animation」になります。たとえば、アニメーションの開始タイミングや回数など、どのようにアニメーションが進行するかを設定することができます。

それでは、1つずつチェックしていきます。

スポンサーリンク

animation-delay

animation-delayはアニメーションの開始タイミングを設定できます。

指定できる値は「s（※秒）」「ms（※ミリ秒）」でマイナス値も指定できます。初期値は「0s」です。

■0s（初期値）

開始まで0秒なので、すぐにアニメーションが開始します。

※●をクリックすると動きます

■2s

2秒経過後、アニメーションが開始します。

※●をクリックすると動きます

■-2s

「2秒経過した」として動作します。つまり、2秒経過後の位置からアニメーションが開始します。

※●をクリックすると動きます

animation-direction

animation-directionはアニメーションの再生方向を設定できます。

指定できる値は下記4つです。初期値は「normal」です。

1. normal
   順方向。0%・fromから100%・toの順番
2. reverse
   逆方向。100%・toから0%・fromの順番
3. alternate
   1回目は順方向、2回目は逆方向、3回目以降も交互に繰り返す
   ※アニメーションの回数が1回であれば、「normal」と同じ
4. alternate-reverse
   1回目は逆方向、2回目は順方向、3回目以降も交互に繰り返す
   ※アニメーションの回数が1回であれば、「reverse」と同じ

■normal（初期値）

アニメーションは順方向に実行されます。2回目以降のアニメーションは「順方向の開始位置」に戻ってから再開します。

※●をクリックすると動きます

■reverse

アニメーションは逆方向に実行されます。2回目以降のアニメーションは「逆方向の開始位置」に戻ってから再開します。

※●をクリックすると動きます

■alternate

1回目のアニメーションは順方向に実行されます。2回目は逆方向に実行されます。それ以降は、順方向・逆方向を交互に繰り返します。奇数回目のアニメーションは「順方向の開始位置」、偶数回目のアニメーションは「逆方向の開始位置」から動作します。

※●をクリックすると動きます

■alternate-reverse

1回目のアニメーションは逆方向に実行されます。2回目は順方向に実行されます。それ以降は、逆方向・順方向を交互に繰り返します。奇数回目のアニメーションは「逆方向の開始位置」、偶数回目のアニメーションは「順方向の開始位置」から動作します。

※●をクリックすると動きます

animation-duration

animation-durationは1回のアニメーションに掛かる時間を設定できます。

指定できる値は「s（※秒）」「ms（※ミリ秒）」です。初期値は「0s」なのでプラスの値を設定しない限り、アニメーションは動作しません。マイナスの値は無効です。

■0s（初期値）

アニメーションは動作しません。

※●をクリックすると動きます

■500ms

1回のアニメーションが500ミリ秒間で完了します。早いです。

※●をクリックすると動きます

■5s

1回のアニメーションが5秒間で完了します。ゆっくりです。

※●をクリックすると動きます

animation-fill-mode

animation-fill-modeは実行前後のスタイルを設定できます。実行前とは「animation-delay」で待機している間を指し、実行後とはアニメーション終了後を指します。

指定できる値は下記4つです。初期値は「none」です。ただし、animation-direction・animation-iteration-countによって実行前後のスタイルは変わります。そちらについては、別途記事を作成しますが、スタイルが変わるパターンも2つ載せておきます。

1. none
   スタイル指定はなし。よって、実行前後とも標準時のスタイル「●」となる
2. forwards
   実行前のスタイル指定はなし、実行後は100%・toのスタイルが適応される。よって、実行前（delayの間）は「●」、実行後は「●」となる
3. backwards
   実行前は0%・from のスタイルが適応され、実行後のスタイル指定はなし。よって、実行前（delayの間）は「●」、実行後は「●」となる
4. both
   実行前は0%・from のスタイルが適応され、実行後は100%・toのスタイルが適応される。よって、実行前（delayの間）は「●」、実行後は「●」となる

■none（初期値）

スタイル指定はなしなので、実行前後とも標準時のスタイル「●」となります。

※●をクリックすると動きます

■forwards

実行前のスタイル指定はなし、実行後は100%・toのスタイルが適応されるので、実行前（delayの間）は「●」、実行後は「●」となります。

※●をクリックすると動きます

■backwards

実行前は0%・from のスタイルが適応され、実行後のスタイル指定はなしなので、実行前（delayの間）は「●」、実行後は「●」となります。

※●をクリックすると動きます

■both

実行前は0%・from のスタイルが適応され、実行後は100%・toのスタイルが適応されるので、実行前（delayの間）は「●」、実行後は「●」となります。

※●をクリックすると動きます

animation-iteration-count

animation-iteration-countはアニメーションを何度繰り返すかを設定できます。

指定できる値は「infinity（※無限）」と「正の整数・小数」です。「infinity」は永遠と繰り返されます。整数であれば指定回数アニメーションを繰り返し、整数ではなければ、アニメーションの途中で終了します。

初期値は「1」です。マイナスの値は無効です。

■1（初期値）

アニメーションは1回動作します。

※●をクリックすると動きます

■2

アニメーションは2回動作します。

※●をクリックすると動きます

■1.3

アニメーションは1回と半分くらい動作します。

※●をクリックすると動きます

■infinity

アニメーションは永遠に繰り返されます。

※●をクリックすると動きます

animation-name

animation-nameは指定する@keyframesの名前を設定できます。

指定できる値は「none（※指定なし）」または「英数字・記号を使った名前」です。@keyframesで設定されていれば、そのアニメーションが動作します。初期値は「none」なので@keyframesで定義されている名称ではない限り、アニメーションは動作しません。

■none（初期値）

アニメーションは動作しません。

※●をクリックすると動きます

■move

下記@keyframes「move」が定義されています。

@keyframes move {
  0% {
    background-color: red;
    margin-left: 0;
  }
  100% {
    background-color: blue;
    margin-left: 50%;
  }
}

アニメーションは「●」で一番左から始まり、「●」に変化しながら中央あたりまで移動します。

※●をクリックすると動きます

■move2

@keyframes「move2」は定義されていないので、アニメーションは動作しません。

※●をクリックすると動きます

animation-play-state

animation-play-stateはアニメーションが実行中か停止中かを設定できます。

指定できる値は「running（※実行中）」「paused（※停止中）」です。アニメーションの途中で「paused」を指定すると途中でストップさせられます。初期値は「running」です。

■running（初期値）

アニメーションが動作します。

※●をクリックすると動きます

■paused

アニメーションは停止中なので動作しませんが、開始時点（0%・from）の「●」になります。

※●をクリックすると動きます

■javascriptで切替

最初は「paused」です。●をクリックするとrunning／pausedを切り替えられます。

animation-timing-function

animation-timing-functionは1回分のアニメーションがどのように動作するかを設定できます。例えば最初はゆっくり始まって徐々に早くなるといった感じです。

指定できる値は複数あります。初期値は「ease」です。

1. ease
   最初と最後がゆっくりになる
2. ease-in
   最初がゆっくりで最後に向けて速くなる
3. ease-out
   最初が速くて最後に向けてゆっくりになる
4. ease-in-out
   最初が速くて真ん中までゆっくりとなり、最後に向けて再度速くなる
5. linear
   一定速度
6. step-start
   最初に100％・toになる
7. step-end
   最後に100％・toになる（ただし、目で確認はできない）
8. cubic-bezier(p1, p2, p3, p4)
   二次元ベジェ曲線を指定できる（※「ease」「ease-in」「ease-out」「ease-in-out」「linear」はいずれもcubic-bezier(～)で設定できる）
   ※たとえば、cubic-bezier(0.25, 0.1, 0.25, 1.0)
   ※こちらは説明が難しいので直感的に分かるようなツールを作成したいと思います
9. steps(n, jumpterm)
   0～100％を n 個で分割して、コマ送りのアニメーションを指定できる
   ※たとえば、steps(4, end)
   ※stepsの詳細は、別途記事にしたいと思います

文字で書いただけではイメージしにくいかと思いますので、実際に見てみます。

■ease（初期値）

アニメーションは最初と最後がゆっくりになります。

※●をクリックすると動きます

■ease-in

アニメーションは最初がゆっくりで最後に向けて速くなります。

※●をクリックすると動きます

■ease-out

アニメーションは最初が速くて最後に向けてゆっくりになります。

※●をクリックすると動きます

■ease-in-out

アニメーションは最初が速くて真ん中までゆっくりとなり、最後に向けて再度速くなります。

※●をクリックすると動きます

■linear

アニメーションは一定速度で変化します。

※●をクリックすると動きます

■step-start

アニメーションの最初に100％・toになります。

※●をクリックすると動きます

■step-end

アニメーションは最後に100％・toになります。ただし、アニメーションは終了し、すぐに最初の状態に戻るため、100％・toの状態は確認できません。

※●をクリックすると動きます

まとめ

「animation」の各プロパティを確認してみました。大体のことは理解できました。

animation-timing-function の細かい指定は難しそうですが「easy」など既に定義された値を使うだけでほとんどのアニメーションは対処できそうです。

頻繁ではありませんが、サイトでアニメーションを入れたいという要望があります。より理解を深めてご要望に応えたいところです^^

それでは、最後までお読みいただきありがとうございました！

スポンサーリンク