読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

webdesignとprogramingの勉強ブログ。

【CSS】animationの記述法方、ショートハンド等のまとめ

HTML・CSS


animationプロパティについてまとめました。

animation-nameと@keyframes

animation-nameで指定した名前を@keyframesで呼び出して使う。

div.box {
/*animeを指定*/
animation-name:anime;
}
@keyframes anime{
ここにanimeの動きを記述していく
}

@keyframesの書き方

from(始まり)からto(終わり)

@keyframes anime{
/*始めの状態*/
  from{width: 50px; height: 30px; background: #444;}
/*終わりの状態*/
  to{width: 100px; height: 60px; background: #eee;}
}

%で指定

@keyframes anime{
/*始めの状態*/
 0%{width: 50px; height: 30px; background: #444;}
/*途中の状態*/
50%{width: 50px; height: 30px; background: #444;}
/*終わりの状態*/
100%{width: 100px; height: 60px; background: #eee;}
}

animation-duration

アニメーション一回分の時間の長さを指定

1s=1秒、.1s=0.1秒

div.sample {
animation-name: anime;
/*3秒間でアニメーションする*/
animation-duration: 3s;
}

animation-timing-function

アニメーションのタイミング・どう進行するか

ease
cubic-bezier(0.25, 0.1, 0.25, 1.0) を指定したのと同じ(開始と完了を滑らかにする)(初期値)
linear
cubic-bezier(0.0, 0.0, 1.0, 1.0) を指定したのと同じ(一定)
ease-in
cubic-bezier(0.42, 0, 1.0, 1.0) を指定したのと同じ(ゆっくり始まる)
ease-out
cubic-bezier(0, 0, 0.58, 1.0) を指定したのと同じ(ゆっくり終わる)
ease-in-out
cubic-bezier(0.42, 0, 0.58, 1.0) を指定したのと同じ(ゆっくり始まってゆっくり終わる)

cubic-bezier(数値, 数値, 数値, 数値)

アニメーションの詳細を数値で指定できる。
下記サイトにて詳しいことが書いてあります。

animation-delay

アニメーションが始まる時間を決める。デフォルトは0

div.sample {
animation-name: anime;
animation-duration: 3s;
animation-timing-function: linear;
/*1sなら1秒後、-1sなら1秒後の動きから始まる。*/
animation-delay: 1s;
}

animation-iteration-count

アニメーションの繰り返し回数を決める。デフォルトは1

div.sample {
animation-name: anime;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
/*無限に繰り返しを指定*/
animation-iteration-count: infinite;
}

animation-direction

アニメーションを交互に反転再生させるかどうかを決める。

normal
初期値
alternate
奇数回ではnormal、偶数回では逆再生になる

div.sample {
animation-name: anime;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

ショートハンドの順番

animation

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction

div.box {
animation: anime 3s linear 1s infinite alternate;
}