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

云罗郡主
リリース: 2018-11-20 17:10:28
転載
4313 人が閲覧しました

この記事では、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属性の詳細説明

上記は css3 での再生メソッドのアニメーションです -timing-function 属性の詳細な説明の完全な紹介 CSS3 チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。


以上がcss3の再生メソッドのanimation-timing-function属性の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:lvyestudy.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!