▲TOPへ戻る

【CSS】animation パート2 アニメーションの動き(time-function),遅延時間(delay),方向(direction)について

animation-timing-function

nimation-timing-functionを設定することにより、動きにアクセントをつけることができます。

ease 開始・終了付近の動きを滑らかにします

animation

linear 一定の割合で直線的に動きます

animation

ease-in 開始付近の動きを緩やかにします。

animation

ease-out 終了付近の動きを緩やかにします。

animation

ease-in-out 開始・終了付近の動きを緩やかにします。

animation

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

animation-delay 1s 1秒遅れ

animation

animation-delay 2s 2秒遅れ

animation 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%

animation

reverse 100% → 0% → 100% → 0%

animation

alternate 0% → 100% → 100% → 0%

animation

alternate-reverse 100% → 0% → 0% → 100%

animation 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%

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<