ホームページ > 記事 > ウェブフロントエンド > アニメーション属性の使い方を詳しく解説
アニメーション属性の使い方を詳しく解説
- 云罗郡主転載
- 2018-11-20 17:01:414511ブラウズ
この記事の内容はアニメーション属性の使い方についてです。アニメーション属性について詳しく説明していますので、困っている方は参考にしていただければ幸いです。
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>効果は次のとおりです:
分析:
この例では、次のように設定します。 #div1 要素のアニメーション期間は 2 秒、#div2 の要素のアニメーション期間は 4 秒に設定されます。オンラインテストから、その効果がはっきりとわかります。
ここで、CSS3 アニメーションは、豪華で複雑なアニメーション効果を実現するために CSS3 変形と組み合わせられることがよくあることを言っておきます。
上記はアニメーション属性の使い方の完全な紹介です。 CSS3 チュートリアル について詳しく知りたい場合は、PHP に注目してください。中国語のウェブサイト。
以上がアニメーション属性の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はlvyestudy.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。