anime-timing-function 属性はどのような用途に使用されますか?-CSSチュートリアル-php.cn

anime-timing-function 属性はどのような用途に使用されますか?

青灯夜游

リリース： 2019-01-31 11:01:33

オリジナル

3876 人が閲覧しました

animation-timing-function 属性は、アニメーションの速度カーブを設定するために使用され、アニメーション速度を一定速度、低速で開始、低速で終了、低速で開始および終了するように設定できます。速度、最初は遅く、次に速くなってから遅くする、または単独のカスタム値。

anime-timing-function 属性はどのような用途に使用されますか?

#CSS3 アニメーションタイミング関数プロパティ

関数:

animation-timing-function はアニメーションの速度カーブを指定します。速度カーブは、アニメーションがある CSS スタイルセットから別の CSS スタイルセットに変化するのにかかる時間を定義します。スピードカーブは変化をよりスムーズにするために使用されます。

構文:

animation-timing-function: value;

ログイン後にコピー

説明:

animation-timing-function は、Cubic Bezier ) 関数を使用して、スピードカーブ。この関数では独自の値、または事前定義された値を使用できます。

linear: アニメーションの速度は最初から最後まで同じです。

ease: デフォルト値。アニメーションは遅い速度で始まり、その後速度が上がり、最後に遅くなります。

イーズイン: アニメーションは低速で始まります。

ease-out: アニメーションは低速で終了します。

イーズインアウト: アニメーションは低速で開始および終了します。

cubic-bezier(n,n,n,n): cubic-bezier 関数内の独自の値。取り得る値は0から1までの数値です。

注: Internet Explorer 9 以前のバージョンでは、animation-timing-function 属性がサポートされていません。

CSS3 アニメーションタイミング関数プロパティの使用例

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
animation-timing-function:linear;

/* Safari and Chrome */
-webkit-animation:mymove 5s infinite;
-webkit-animation-timing-function:linear;
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

ログイン後にコピー

レンダリング:

anime-timing-function 属性はどのような用途に使用されますか?