css3はループ実行アニメーションを実装しており、毎回アニメーションが遅延する_html/css

1. Web ページの構造

2. オリジナルのアニメーション効果

3. 変更された要件の実装

ホームページ

ウェブフロントエンド

htmlチュートリアル

css3はループ実行アニメーションを実装しており、毎回アニメーションが遅延する_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:19 AM

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 までご連絡ください。