アニメーション属性の使い方を詳しく解説-CSSチュートリアル-php.cn

アニメーション属性の使い方を詳しく解説

云罗郡主

リリース： 2018-11-20 17:01:41

転載

4584 人が閲覧しました

この記事の内容はアニメーション属性の使い方についてです。アニメーション属性について詳しく説明していますので、困っている方は参考にしていただければ幸いです。

animation-duration 属性

CSS3 では、animation-duration 属性を使用してアニメーションの継続時間を設定できます。これは、0% から 100% までの完了までにかかる合計時間です。。 anime-duration プロパティは、CSS3 トランジションのtransition-duration プロパティに似ています。

構文:

animation-duration:时间；

ログイン後にコピー

説明:

animation-duration 属性値は時間です。単位は s (秒) で、0.5 秒などの小数を使用できます。。

例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 animation-duration属性</title>
    <style type="text/css">
        @-webkit-keyframes mytranslate
        {
            0%{}
            100%{-webkit-transform:translateX(100px);}
        }
        div:not(#container)
        {
            width:40px;
            height:40px;
            border-radius:20px;
            background-color:red;
            -webkit-animation-name:mytranslate;
            -webkit-animation-timing-function:linear;
        }
        #container
        {
            display:inline-block;
            width:140px;
            border:1px solid silver;
        }
        #div1{-webkit-animation-duration:2s;margin-bottom:10px;}
        #div2{-webkit-animation-duration:4s;}
    </style>
</head>
<body>
    <div id="container">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>
</body>
</html>

ログイン後にコピー

効果は次のとおりです:

アニメーション属性の使い方を詳しく解説