ホームページ >ウェブフロントエンド >htmlチュートリアル >css3はループ実行アニメーションを実装しており、毎回アニメーションが遅延する_html/css_WEB-ITnose
css3はループ実行アニメーションを実装しており、毎回アニメーションが遅延する_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:19:26976ブラウズ
1. 最終効果
要件: ギフト画像の小さなアニメーションが 2 秒ごとに実行されます。
要件はたったの 1 文です。実装プロセスを見てみましょう。
2. 実装プロセス1. Web ページの構造
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> a { display: inline-block; background-color: #cc2222; text-decoration: none; color: #fff; font-size: 14px; padding: 10px 12px; width: 100px; position: relative; } .ico { position: absolute; width: 14px; height: 16px; background: url(images/ico.png) no-repeat center; background-size: 100%; position: absolute; top: 4px; right: 27px; } </style></head><body> <nav> <a href="javascript:;" class="box"> 一元夺宝 <div class="ico"></div> </a> </nav></body></html> 2. オリジナルのアニメーション効果
マウスを上に置くとアニメーションが表示されます。
アニメーションのスタイルは次のとおりです:
/*动画*/ .ico:hover{ -webkit-animation: Tada 1s both; -moz-animation: Tada 1s both; -ms-animation: Tada 1s both; animation: Tada 1s both}/*浏览器兼容性部分略过*/@keyframes Tada { 0% { transform: scale(1); transform: scale(1) } 10%,20% { transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg) } 30%,50%,70%,90% { transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 40%,60%,80% { transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { transform: scale(1) rotate(0); transform: scale(1) rotate(0) }} 効果: マウスを上に置くと、ギフト画像が移動します。
3. 変更された要件の実装
要件は、ホバー時にアニメーションを表示することではなく、2 秒ごとに表示するようになりました。
アイデア: アニメーションを表示するためにホバーを付ける必要がない場合は、ホバーを削除して 2 秒ごとにアニメーションを表示します。2 秒遅らせると、アニメーションが実行され続けることを考えるのは簡単です。
この時点で、関連するスタイルは次のようになります:
.ico{-webkit-animation: Tada 1s 2s both infinite;-moz-animation: Tada 1s 2s both infinite;-ms-animation: Tada 1s 2s both infinite;animation: Tada 1s 2s both infinite;} しかし、表示される効果は次のとおりです: ページ読み込み時の最初のアニメーションは 2 秒遅延され、その後のアニメーションは遅延しなくなります。以下の通り、要件を満たしておりません。
効果を確認するために、下の写真は 6 秒間の遅延の効果を示しています。
現時点でのもう 1 つの考え方は、アニメーションの実行を遅らせることではなく、アニメーション自体の効果として、要素は最初の 2 秒では動かず、次の 1 秒で動きます。その後、ループ内で実行を続けます。 このようにすると、視覚的にはアニメーションが 2 秒と 1 秒遅れて実行されるように見えます。
元のパーセンテージノードがどのくらいになったかを計算します。
アニメーションの合計時間を 3 秒に変更し、元のパーセンテージを計算されたパーセンテージに置き換えます。 コードは次のとおりです。
.ico{ -webkit-animation: Tada 3s both infinite; -moz-animation: Tada 3s both infinite; -ms-animation: Tada 3s both infinite; animation: Tada 3s both infinite;}@keyframes Tada { 0% { transform: scale(1); transform: scale(1) } 70%,73%{ transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg) } 77%,83%,90%,97% { transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 80%,87%,93%{ transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { transform: scale(1) rotate(0); transform: scale(1) rotate(0) }} 効果は期待どおりです。
完全なコードは次のとおりです:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo of starof</title> <style> a { display: inline-block; background-color: #cc2222; text-decoration: none; color: #fff; font-size: 14px; padding: 10px 12px; width: 100px; position: relative; } .ico { position: absolute; width: 14px; height: 16px; background: url(images/ico.png) no-repeat center; background-size: 100%; position: absolute; top: 4px; right: 27px; } /*动画*/ .ico{ -webkit-animation: Tada 3s both infinite; -moz-animation: Tada 3s both infinite; -ms-animation: Tada 3s both infinite; animation: Tada 3s both infinite;}@-webkit-keyframes Tada { 0% { -webkit-transform: scale(1); transform: scale(1) } 70%,73% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg) } 77%,83%,90%,97% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 80%,87%,93% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0) }}@-moz-keyframes Tada { 0% { -moz-transform: scale(1); transform: scale(1) } 70%,73% { -moz-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg) } 77%,83%,90%,97% { -moz-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 80%,87%,93%{ -moz-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { -moz-transform: scale(1) rotate(0); transform: scale(1) rotate(0) }}@-ms-keyframes Tada { 0% { -ms-transform: scale(1); transform: scale(1) } 70%,73% { -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg) } 77%,83%,90%,97% { -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 80%,87%,93% { -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0) }}@keyframes Tada { 0% { transform: scale(1); transform: scale(1) } 70%,73%{ transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg) } 77%,83%,90%,97% { transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg) } 80%,87%,93%{ transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg) } 100% { transform: scale(1) rotate(0); transform: scale(1) rotate(0) }} </style></head><body> <nav> <a href="javascript:;" class="box"> 一元夺宝 <div class="ico"></div> </a> </nav></body></html>
この記事ではアイデアを紹介するだけです。アニメーションの各パラメーターの詳細については、以下を参照してください。
css3 の変形とアニメーション (1)
CSS3での変形とアニメーション(2)
CSS3での変形とアニメーション(3)
この記事の著者starofは、知識自体が変化しているため、著者も常に学び成長しており、内容は読者の誤解を避けるため、また出典を容易に追跡できるよう、記事は随時更新されます。転載する場合は出典を明記してください。ご質問がございましたら、お気軽にご相談ください。 。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。