css3アニメーション シーケンスアニメーション

今回はcss3アニメーションシーケンスアニメーションを使用する際の注意点を紹介します。実際の事例を見てみましょう。

まず、アニメーションに追加されたさまざまなパラメーターを確認してください

(1) 無限パラメーター。これは、アニメーションが無限にループすることを意味します。速度カーブと再生回数の間に時間パラメータを挿入して、アニメーションの遅延時間を設定することもできます。アイコンが 1 秒後に回転を開始し、2 回回転するようにしたい場合、コードは次のとおりです

.close:hover::before{
    -webkit-animation: spin 1s linear 1s 2;
    animation: spin 1s linear 1s 2;
}

(2) 代替パラメータ。アニメーションアニメーションに交互の逆再生パラメータを追加します。このパラメータを追加すると、アニメーションは偶数回逆再生されます。

.close:hover::before{
    -webkit-animation: spin 1s linear 1s 2 alternate;
    animation: spin 1s linear 1s 2 alternate;
}

アニメーション属性パラメータの中で、遅延パラメータは最もよく使用されるパラメータの 1 つです。アニメーション化されたオブジェクトが複数ある場合、多くの場合、遅延パラメータを使用してアニメーション シーケンスを形成します。たとえば、次のコードは 5 つの異なるアイコンを定義します。

<span class="close icon-suningliujinyun">Close</span>
<span class="close icon-shousuo">Close</span>
<span class="close icon-zhankai">Close</span>
<span class="close icon-diaoyonglian">Close</span>
<span class="close icon-lingshouyun">Close</span>

アイコンの基本的なスタイルは前の [閉じる] アイコンと同じです。異なる点は、ここでのアイコンは水平に配置できるようにインラインブロックに設定されています。コードは次のとおりです。次の図に示すように、初期化中に

.close{
    font-size:0px;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    background:#FFF;
    color:#8b8ab3;
    text-align:center;
}
.close::before{
    font-family: 'suningcloud';
    speak:none; /*使文本内容不能通过屏幕阅读器等辅助设备读取*/
    font-size:48px;
    display:block;
}

が表示されます。次に、アイコンの初期位置が下に -100% オフセットされるように、アイコンにアニメーションを追加します。そして、上に移動して初期位置に戻ります。このプロセス中に、アイコンは同時に完全に透明から完全に不透明に変わります

.close{
	font-size:0px;/*使span中的文字不显示*/
	cursor:pointer;/*使鼠标指针显示为手型*/
	display:inline-block;
	width:100px;
	height:100px;
	line-height:100px;
	border-radius:50%;/*使背景形状显示为圆形*/
	background:#FFF;
	color:#8b8ab3;
	text-align:center;
	/**/
	-webkit-animation: moving 1s linear;
	animation: moving 1s linear;
}
@-webkit-keyframes moving {
    from {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@keyframes moving {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}

上記の 5 つのアイコンのアニメーション効果はすべて同時に実行されます。アイコンの動きを連続的にするには、各アニメーションに遅延を追加します。前の方法とは異なり、アニメーション遅延をアニメーション遅延属性を通じて直接設定できます。コードは次のとおりです。

.icon-suningliujinyun{
	-webkit-animation-delay:0s;
	animation-delay: 0s;
}
.icon-shousuo{
	-webkit-animation-delay:.1s;
	animation-delay: .1s;
}
.icon-zhankai{
	-webkit-animation-delay:.2s;
	animation-delay: .2s;
}
.icon-diaoyonglian{
	-webkit-animation-delay:.3s;
	animation-delay: .3s;
}
.icon-lingshouyun{
	-webkit-animation-delay:.4s;
	animation-delay: .4s;
}

上記のコードでは、5 つのアイコンの遅延時間を 0、0.1、0.2、0.3 に設定します。そして0.4秒。実際、0 秒の遅延がデフォルトであるため、最初のアイコンも実際には遅延コードを設定する必要はありません。テストページのアニメーション効果は図のとおりです。

2 回更新したところ、最初は上部にいくつかのアイコンが点滅していることがわかりました。これはバグと考えられます

このバグの理由は、最初のアイコンを除いて、残りのアイコンにはアニメーションが開始されない場合にのみ、アイコンが移動せず、完全に不透明になるためです。アニメーションが開始されます。その瞬間、アイコンは完全に透明でオフセットされたアニメーション開始状態に切り替わります。

解決策: アニメーションアニメーションのanimation-fill-mode属性を使用する必要があります。このプロパティは、アニメーション時間外の要素の状態を指定します。値が forward の場合は、アニメーションが完了した後も最後のキー フレームの属性値が保持されることを意味します。値がbackward の場合は、その逆で、最初のキー フレームの属性値が適用されることを意味します。アニメーションが遅延する前の要素に を指定し、値が Both の場合は、前方と後方の両方の設定が含まれていることを意味します。この例では、後方または両方を使用できます。

.close{
    font-size:0px;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    background:#FFF;
    color:#8b8ab3;
    text-align:center;
    /**/
    -webkit-animation: moving 1s linear;
    animation: moving 1s linear;
    /*清除抖动*/
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
}

の効果は次のとおりです:

PS: アニメーションでは、トランジション アニメーションのような速度カーブを設定することもできます

たとえば、この例では、 : アイコンの動きに多少の弾性効果があることを望みます。つまり、アイコンが上に移動するときに、速度が低下して終点で停止するのではなく、終点に到達した後も上に移動し続け、その後移動します。一定の距離を超えると逆方向に終点に戻り、往復運動を形成します。

もちろん、フレーム アニメーションを使用してそのような効果を実現することもできますが、スピード カーブを使用する方が簡単です。 CSS3 アニメーションでは 3 次ベジェ数学関数を使用してスピード カーブを生成し、この関数のパラメーターは直感的ではないため、カスタム カーブを使用するには、多くの場合、いくつかのツールが必要になります。 cubic-bezier.com などのサイトを使用して、速度曲線を視覚的に調整できます。

次に、アニメーション属性のパラメータにスピード カーブを書き込むことができます。コードは次のとおりです。

.close{
    font-size:0px;/*使span中的文字不显示*/
    cursor:pointer;/*使鼠标指针显示为手型*/
    display:inline-block;
    width:100px;
    height:100px;
    line-height:100px;
    border-radius:50%;/*使背景形状显示为圆形*/
    background:#FFF;
    color:#8b8ab3;
    text-align:center;
    /**/
    /*-webkit-animation: moving 1s linear;
    animation: moving 1s linear;*/
    /*cubic-bezier*/
    -webkit-animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);
      animation:moving 1s cubic-bezier(.62,-0.91,.45,1.97);
    /*清除抖动*/
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both; 
}

効果は以下のとおりです。

事例を読んだ後、あなたはこの方法をマスターしたと思います。この記事では、php 中国語 Web サイトの他の関連記事にも注目してください。

推奨書籍:

HTML と CSS を使用して Cornell Notes を実装する

CSS Web ページのレイアウトに関する簡単な説明

以上がcss3アニメーション シーケンスアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。