css3の再生メソッドのanimation-timing-function属性の詳細説明-CSSチュートリアル-php.cn

css3の再生メソッドのanimation-timing-function属性の詳細説明

云罗郡主

リリース： 2018-11-20 17:10:28

転載

4350 人が閲覧しました

この記事では、CSS3 の再生メソッドのアニメーションタイミング関数属性について詳しく説明します。必要な方は参考にしていただければ幸いです。

animation-timing-function 属性

CSS3 では、animation-timing-function 属性を使用してアニメーションの再生方法を設定できます。いわゆる「再生方法」が主に使用されます。再生時間中のレートでアニメーションを指定します。このうち、animation-timing-function 属性は、transition-timing-function 属性と似ており、比較して理解して覚えることができます。

構文:

animation-timing-function：取值；

ログイン後にコピー

説明:

animation-timing-function の属性値は、transition-timing-function の属性値と同じで、全部で 5 種類あります。

css3の再生メソッドのanimation-timing-function属性の詳細説明

例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 animation-timing-function属性</title>
    <style type="text/css">
        @-webkit-keyframes mytransform
        {
            0%{ }
            100%{width:300px;}
        }
        div
        {
            width:100px;
            height:50px;
            text-align:center;
            line-height:50px;
            border-radius:0;
            background-color:#14C7F3;
            -webkit-animation-name:mytransform;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
        div+div
        {
            margin-top:10px;
        }
        #div1{-webkit-animation-timing-function:linear;}
        #div2{-webkit-animation-timing-function:ease;}
        #div3{-webkit-animation-timing-function:ease-in;}
        #div4{-webkit-animation-timing-function:ease-out;}
        #div5{-webkit-animation-timing-function:ease-in-out}
    </style>
</head>
<body>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです:

css3の再生メソッドのanimation-timing-function属性の詳細説明