CSSのアニメーションの基本

1.transiton

本体に設定すること

何に対してAnimationを適用させるか

.box{
	transition-property: 適用させる全てのcss;
/* 	適用させるCSSの例：transform, border-radius */
/* 	初期状態はall */
}

Animationに要する時間

.box{
	transition-duration: 0.3s;

Animationに開始までの時間

.box{
	transition-delay: 時間s;

Animationする基準点

.box{
	transform-origin: top left;

一括指定

.box{
	transform: 順不同(時間sは1つ目がdurationn);

疑似クラスにつけるAnimation設定

transform

.box:hover{
	
　/* 移動 */
  transform: translate(50px, 20px);
	
　/* 回転 */
  transform: rotate(30deg);
	
　/* 拡大縮小 */
  transform: scale(.5, 2);

　/* 組合せ　前から順に適用 */
  transform: translateX(100px) rotate(30deg);
  transform: rotate(30deg) translateX(100px) ;

2.animation

アニメーションの基本設定

@keyframes アニメーション名{
  /* animation-duraton時間の% */
  0%{ 
    transform: none;
  }
  /* 同じ内容を複数指定可能 */
  20%,80%{
    transform: translateX(200px) rotate(360deg);
  }
  100%{
    transform: translateX(500px) rotate(360deg);
	/* ↓下に要素があると重なるので終わったら存在を消す必要ある時 */
	pointer-events: none;
  }
}

/* 回転(無限にやらせる)の時 ％ではなくfrom-toも使える */
@keyframes spin{
  from{
    transform: none;
  }
  to{
    transform: rotate(360deg);
  }
}

本体に設定すること

アニメーションの適用

.box{
	animation: アニメーション名;
}

アニメーション時間

.box{
	animation-duration: アニメーション時間s;
}

アニメーションを開始するまでの時間

.box{
	animation-delay: 開示までの時間s;
}

アニメーション名の最後で停止させる(＝初期値に戻らないようにする)

.box{
	animation-fill-mode: forwards;
}

アニメーションの繰り返し

.box{
	animation-iteration-count: infinite;
}

/* 数字で回数、無限：infinite */

アニメーションの方向(行ったり来たり)

• alternate：行ったり来たり
• reverse：ただ逆にするだけ
• alternate-reverse：逆にして行ったり来たり

.box{
	animation-direction: alternate; 
}

アニメーション一括指定

.box{
	animation: move 2s infinite 1s;
}
/* transitionと同様に順不同 */

3.動きの緩急の設定

• ease(初期状態)
• ease-in：小さいものが動く感じ
• ease-in-out：重いものが動く感じ
• liner：ずっと一定

{
 animation-timing-function: ease;
 transition-timing-function: ease;
}