ホームページ > 記事 > ウェブフロントエンド > anime-iteration-count プロパティの使用方法
anime-iteration-count プロパティの使用方法
- 青灯夜游オリジナル
- 2019-01-31 11:25:164532ブラウズ
animation-iteration-count 属性は、アニメーションの再生回数を定義するために使用されます。animation-iteration-count 属性の値を無限に設定すると、アニメーションの無限ループ再生を実現できます。
#CSS3 アニメーション反復回数プロパティ
関数:animation- iteration-count 属性は、アニメーションが再生される回数を定義します。
構文:
animation-iteration-count: n|infinite;n: アニメーションの再生回数を定義する値。 infinite: アニメーションを無限に再生することを指定します。
注: Internet Explorer 9 以前のバージョンでは、animation-iteration-count プロパティがサポートされていません。
#CSS3 anime-iteration-count プロパティの使用例
アニメーションループを 3 回設定する<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s;
animation-iteration-count:3;
/* Safari and Chrome */
-webkit-animation:mymove 3s;
-webkit-animation-iteration-count:3;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>レンダリング:
上記はこの記事の全内容です。皆様のお役に立てれば幸いです。ヘルプを学びます。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！
以上がanime-iteration-count プロパティの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。