ホームページ > 記事 > ウェブフロントエンド > アニメーション属性を使用してループ間の遅延実行を実装する方法のチュートリアル
アニメーション属性を使用してループ間の遅延実行を実装する方法のチュートリアル
- 零下一度オリジナル
- 2017-05-18 14:37:383408ブラウズ
まず、アニメーションの定義と使用法を紹介します
アニメーション属性は、6 つのアニメーション属性を設定するための短縮属性です:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-directionデフォルト値: none 0ease 0 1 Normal
注: それ以外の場合は、常にanimation-duration属性を指定してください。 、継続時間が 0 の場合、アニメーションは再生されません。
Syntax
animation: name duration timing-function delay iteration-count direction;
animation-name は、セレクターにバインドする必要があるキーフレーム名を指定します。 。 -Animation-Duration は、アニメーションの完了にかかる時間を秒またはミリ秒で計算することを規定します。
animation-timing-function はアニメーションの速度曲線を指定します。
animation-delay アニメーションが開始されるまでの遅延を指定します。
animation-iteration-count アニメーションを再生する回数を指定します。 (値:n回、無限ループ)
animation-direction アニメーションを順番に逆再生するかどうかを指定します。 上の要約: 上記の属性に従って、特定の条件に従ってAnimation-DlayとAnimation-Iteration-countを設定するだけで済みます。
例:
p
{
animation:mymove 5s 5s infinite;
-webkit-animation:mymove 5s 5s infinite; /* Safari 和 Chrome */
}計画例:
<!doctype html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.item1{
list-style: none;
-webkit-animation: revolving 4s 0s infinite;
animation: revolving 4s 0s infinite;
}
@-webkit-keyframes revolving{
0,75%{
-webkit-transform: perspective(700px) rotateX(90deg);
}
87.5%{
-webkit-transform: perspective(700px) rotateX(0deg);
}
100%{
-webkit-transform: perspective(700px) rotateX(-90deg);
}
}
</style>
</head>
<body>
<ul>
<li class="item1">梅西与美洲杯失之交臂</li>
</ul>
</body>
</html> 合計アニメーションを 4 秒に設定すると、最初の 75% (3 秒) は変更されず (0 ～ 75%)、次の 25% は変更されません。これは 1 秒間、アニメーション化されます。 【関連おすすめ】
1.
2. マスターすべき CSS3 アニメーション (Animation) の 8 つのプロパティ
3. メソッドを共有する。 CSS3アニメーション(アニメーション)を監視する) 終了イベントインスタンス
4. CSS3の2つの一時停止メソッド(トランジション、アニメーション)の詳細説明
以上がアニメーション属性を使用してループ間の遅延実行を実装する方法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。