ホームページ > ウェブフロントエンド > CSSチュートリアル > anime-duration 属性はどのような用途に使用されますか?

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

青灯夜游
リリース: 2019-01-31 10:47:53
オリジナル
5628 人が閲覧しました

animation-duration 属性は、アニメーションがサイクルを完了するのに必要な時間を秒またはミリ秒で定義するために使用されます。値が 0 の場合、アニメーション効果がないことを意味します。

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

#CSS3 アニメーション期間プロパティ

関数: アニメーション期間プロパティアニメーションが 1 サイクルを完了するのにかかる時間を秒またはミリ秒で定義します。

構文:

1

animation-duration: time

ログイン後にコピー

time: アニメーションが完了するまでにかかる時間を指定します。デフォルト値は 0 で、アニメーション効果がないことを意味します。

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

#CSS3 アニメーション継続時間プロパティの使用例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove infinite;

animation-duration:2s;

 

/* Safari and Chrome */

-webkit-animation:mymove infinite;

-webkit-animation-duration:2s;

}

 

@keyframes mymove

{

from {top:0px;}

to {top:200px;}

}

 

@-webkit-keyframes mymove /* Safari and Chrome */

{

from {top:0px;}

to {top:200px;}

}

</style>

</head>

<body>

 

<p><strong>注:</strong>Internet Explorer 9 以及更早的版本不支持 animation-name 属性。</p>

 

<div></div>

 

<p><b>注:</b>始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。</p>

 

</body>

</html>

ログイン後にコピー
レンダリング:


anime-duration 属性はどのような用途に使用されますか? 以上がこの記事の全内容ですが、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ! !

以上がanime-duration 属性はどのような用途に使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート