【CSS】animation パート2 アニメーションの動き（time-function）,遅延時間（delay）,方向（direction）について
animation-timing-function
nimation-timing-functionを設定することにより、動きにアクセントをつけることができます。
ease 開始・終了付近の動きを滑らかにします
linear 一定の割合で直線的に動きます
ease-in 開始付近の動きを緩やかにします。
ease-out 終了付近の動きを緩やかにします。
ease-in-out 開始・終了付近の動きを緩やかにします。
cubic-bezier(数値, 数値, 数値, 数値)については、また別のページで解説したいと思います。
HTML
<img class="target1" src="../../images/1.png">
<img class="target2" src="../../images/1.png">
<img class="target3" src="../../images/1.png">
<img class="target4" src="../../images/1.png">
<img class="target5" src="../../images/1.png">
CSS
.target1{
animation: target1 3s ease;
}
.target2{
animation: target1 3s linear;
}
.target3{
animation: target1 3s ease-in;
}
.target4{
animation: target1 3s ease-out;
}
.target5{
animation: target1 3s ease-in-out;
}
@keyframes target1 {
0%{
transform: translate(0);
}
100%{
transform: translateX(600px);
}
}
animation-delay
animation-delayで時間を指定することにより、開始時間を遅らせることができます。
animation-delay 遅れなし
animation-delay 1s 1秒遅れ
animation-delay 2s 2秒遅れ
CSS
.target1{
animation: target1 3s;
}
.target2{
animation: target1 3s 1s;
}
.target3{
animation: target1 3s 2s;
}
animation-direction
animation-directionを指定してアニメーションの方向を指定することができます。
アニメーションを2回させています。@keyframesのパーセンテージで言うと、
CSS
@keyframes target1 {
0%{
transform: translate(0);
}
100%{
transform: translateX(600px);
}
}
normal 0% → 100% → 0% → 100%
reverse 100% → 0% → 100% → 0%
alternate 0% → 100% → 100% → 0%
alternate-reverse 100% → 0% → 0% → 100%
CSS
.target1{
animation: target1 3s normal;
}
.target2{
animation: target1 3s reverse;
}
.target3{
animation: target1 3s alternate;
}
.target4{
animation: target1 3s alternate-reverse;
}
まとめ
アニメーションの動き（time-function）,遅延時間（delay）,方向（direction）について解説しましました。
| animation-timing-function | ease | 開始・終了付近の動きを滑らかに |
|---|---|---|
| linear | 一定の割合で直線的に | |
| ease-in | 開始付近の動きを緩やかに | |
| ease-out | 終了付近の動きを緩やかに | |
| ease-in-out | 開始・終了付近の動きを緩やかに | |
| animation-delay | 開始時間を遅らせます | |
| animation-direction | normal | 0%→100%→0%→100% |
| reverse | 100%→0%→100%→0% | |
| alternate | 0%→100%→100%→0% | |
| alternate-reverse | 100%→0%→0%→100% |
