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

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【CSS】CSS3でアニメーションに関係するプロパティ(animation , transition , transform)

  1. animation
  2. transition
  3. transform

についてまとめます。

animation

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;
}

transition

transition-property

CSSプロパティ名を指定する際に使用

<style>
.test{
	width:200px;
	height:200px;
	background:#8f8;
        /*backgoround-colorだけ指定して変化に動きをつける。*/
	transition-property:background-color;
	transition-duration:1s;
	transition-timing-function:linear;
}
.test:hover{
	width:300px;
	height:300px;
	background:#88f;
}
</style>
<body>
<div class="test">
</div>
</body>

transition-duration

変化にかかる時間を指定
1s = 1秒

transition-timing-function

animation-timing-functionと同様の値を指定できる。

transition-delay

animation-delayと同様
1sなら1秒後、-1sなら1秒前の動きから始まる。

transitionのショートハンド

以下の順に指定できる

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

最初に指定した時間がdurationになり2番目に指定した時間はdelayになる。
一つのプロパティについて指定した後、「,」で区切りまた別のプロパティを書き始められる。

<style>
.test{
	width:200px;
	height:200px;
	background:#8f8;
	transition:
	background 1s linear 0,
	width 1s linear 0,
	height 1s linear 0;
}
.test:hover{
	width:300px;
	height:300px;
	background:#88f;
}
</style>
<body>
<div class="test">
</div>

transform

translate

tlanslate(x軸の移動,y軸の移動);

transform:translate(100px,100px);

tlanslateX(x軸の移動);

transform:translate(100px);

tlanslateY(y軸の移動);

transform:translateY(100px);

tlanslateZ(z軸の移動);

transform:translateZ(100px);

rotate

rotate(回転する角度);

transform:rotate(100deg);

rotateX(x軸に回転する角度);

transform:rotateX(100deg);

rotateY(y軸に回転する角度);

transform:rotateY(100deg);

rotateZ(z軸に回転する角度);

transform:rotateZ(100deg);

rotate3d(数値, 数値, 数値, 回転角度)

transform:rotate3d(1,0,0,180deg);

skew

skewX(x軸の傾斜角度)

transform:skewX(100deg);

skewY(y軸の傾斜角度)

transform:skewY(100deg);

skew(x軸,y軸)

transform:skew(100deg,100deg);