今日、@老气网红丝丝による Weibo の投稿を目にしました。Codepen がアドレス http://codepen.io/yisi/pen/ LpXVJb で Twitter のようなアニメーション効果のソース コードを投稿しました。見てみましたが、ソースコードも非常にシンプルで、CSS3 で使用されているテクニックをいくつか紹介します。
最初にレンダリングを見てみましょう。明確に見るために、アニメーションの時間間隔を長く設定しました。
ソースコードを投稿します: js は使用されず、html と css のみが使用されます。
htmlコードは以下の通り
<h1>Twitter heart button animation</h1><input type="checkbox" name="" id="btn" /><label class="btn-love" for="btn"></label><a href="http://codepen.io/chrisgannon/pen/NGLKWO" target="_blank">The SVG version</a>
css コードは以下の通り
1 body { 2 text-align: center; 3 } 4 5 h1 { 6 text-align: center; 7 color: #555; 8 font-weight: normal; 9 }10 11 #btn {12 position: absolute;13 left: -100%;14 top: -100%;15 opacity: 0;16 z-index: -1;17 }18 19 .btn-love {20 position: absolute;21 z-index: -1;22 left: 0;23 right: 0;24 top: 0;25 bottom: 0;26 margin: auto;27 height: 100%;28 width: 100%;29 cursor: pointer;30 }31 .btn-love:after {32 content: "";33 position: absolute;34 left: 0;35 right: 0;36 top: 100px;37 margin: 0 auto;38 background: url(https://abs.twimg.com/a/1446862637/img/t1/web_heart_animation.png) 0 0 no-repeat;39 background-size: 2900%;40 height: 100px;41 width: 100px;42 }43 44 #btn:checked + .btn-love:after {45 -webkit-animation: heart-burst steps(28) .8s 1 both;46 animation: heart-burst steps(28) .8s 1 both;47 }48 49 @-webkit-keyframes heart-burst {50 0% {51 background-position: left;52 }53 100% {54 background-position: right;55 }56 }57 58 @keyframes heart-burst {59 0% {60 background-position: left;61 }62 100% {63 background-position: right;64 }65 }
css 先ほどのコードもわかりやすいので、31行目から説明します。これは、クラス「btn-love」を持つ以前の対応するラベルの背景画像を設定するためです。背景画像にリンクが追加されており、このリンクの後の背景画像が以下の長い画像であることがわかります。
看到这里大家也能猜到，就是用个长图设置开始显示的位置和结束时的位置，并设置其变化的时间，一帧一帧的播放，来模拟一个动画效果。
#btn:checked + .btn-love:after { -webkit-animation: heart-burst steps(28) .8s 1 both; animation: heart-burst steps(28) .8s 1 both; }
:checked は、選択されたすべての入力要素と一致するために css3 で使用されます。これについては疑いの余地はありません。
中括弧内のアニメーション効果を見てください。これは CSS3 のアニメーション属性を使用します。この属性は、次のアニメーション属性を設定するために使用される省略された属性です。
animation-name: セレクターにバインドする必要があるキーフレーム名を指定します。
animation-duration: アニメーションの完了にかかる時間を秒またはミリ秒で指定します。
animation-timing-function: アニメーションのスピード カーブを指定します。値は、ease-in |ease-in-out | cubic-bezier(x1, y1) です。 , x2, y2)
animation-delay: アニメーションが開始するまでの遅延を指定します。
animation-iteration-count: アニメーションを再生する回数を指定します。
animation-direction: アニメーションを順番に逆方向に再生するかどうかを指定します。
animation-play-state: 属性はアニメーションが実行中か一時停止かを指定します。
animation-fill-mode: アニメーションの再生前後にアニメーション効果を表示するかどうかを指定します。
括弧内には合計5つの値が設定されます。
最初の値はアニメーション名に設定されます。 heart-burstはこのアニメーションに設定されているアニメーション名です。
2 番目の値は、animation-timing-function に設定されます。ステップ(28)は何を意味しますか?上記のアニメーションは線形ではなく、画像をフレーム単位で再生するのと似ているため、step() 関数を導入する必要があります。この関数とこの属性の具体的な使用方法については、以下で詳しく説明します。
animation-timing-function 属性は次の値を取ることができます。
ease: アニメーションはゆっくり始まり、その後加速し、最後に遅くなります。
linear: アニメーションの速度は最初から最後まで同じです。
ease-in: 低速で開始します。
ease-out: 低速で終了;
ease-in-out: アニメーションは低速で開始および終了します
step 関数はステップ関数を指定します
最初のパラメータは間隔の数を指定します。時間関数 (ゼロより大きい正の整数である必要があります)。アニメーションをさまざまなステップに分割します。
2 番目のパラメータはオプションで、start と end の 2 つの値を受け入れ、各間隔の開始点または終了点でのステップ変化を指定します。デフォルトは end です。
step-start は、steps(1,start) と同等で、アニメーションは 1 つのステップに分割され、start の左端の部分がアニメーション実行時の開始となります。ステップ(1,end): アニメーションは 1 つのステップに分割され、アニメーションの実行は終了エンドポイントから開始され、デフォルト値は end です。
そして、animation-timing-function 属性は、@keyframes 全体ではなく、アニメーションの各フレームおよび各フレームの設定用であり、@keyframes で設定されたキーフレームと同等ではありません。
今の例も例として考えてみましょう。以下のコードは 0% から 100% に直接変化することがわかります。
@keyframes heart-burst { 0% { background-position: left; } 100% { background-position: right; } }0% と 100% に任意の状態を追加すると、次のようなアニメーションになります。明らかな観察ですが、アニメーション時間はまだ延長されています)
アニメーションに問題があることがわかります。
3 番目の値は、略語順にアニメーション遅延にする必要がありますか?実際にはそうではなく、アニメーション期間である必要があります。アニメーションで秒またはミリ秒の値のみを設定する場合、その値はデフォルトのanimation-durationの値になります。 2 つの値が設定されている場合、最初にアニメーション期間、次にアニメーション遅延の順に対応する値が割り当てられます。したがって、0.8 秒はアニメーション全体を完了するのにかかる合計時間です。 0.8 秒の値を大きく設定してみると、アニメーション設定の遅延が大きくなったのではなく、アニメーションが遅くなったことがわかり、私の発言が検証されました。
4 番目の値は、animation-iteration-count の値を設定することです。つまり、1 セットはアニメーションのループ数を設定するもので、これを 2 に変更すると、最初の再生が終了した後に 2 回目のアニメーションが再生されることがわかります。
5 番目の値は、animation-fill-mode の値を設定することです。 anime-fill-mode 属性には、次のように合計 4 つの値があります。
none: デフォルトの動作を変更しません。
forwards: アニメーションが完了したら、最後のプロパティ値 (最後のキーフレームで定義されたもの) を保持します。
backwards: アニメーションがアニメーション遅延で指定された期間表示される前に、開始プロパティ値 (最初のキーフレームで定義) を適用します。
両方: 順方向と逆方向の両方のフィル モードが適用されます。
上記の設定が両方ともキャンセルされると、次のアニメーションが表示されることがわかります。 (!!! ここのフォントサイズは何度も修正しましたが、なぜか調整できないので、そのまま読みます...!!!)
がご覧いただけますアニメーションが終了すると、最終的な「赤いハート」状態はアニメーションの最初のフレームに戻ります。したがって、両方の設定の目的は、アニメーションの開始と終了後にアニメーションが配置されているフレームを維持することであると結論付けることができます。
このアニメーションに関係しないのは、アニメーション遅延、アニメーション方向、およびアニメーション再生状態です。アニメーション遅延は、前述したようにアニメーションの遅延時間を設定するものです。アニメーション方向属性は、アニメーションを順番に逆方向に再生するかどうかを定義します。使用可能な値は 2 つあります: Normal と Alternate。 Normal はデフォルト値で、回転しないことを意味し、Alternate はアニメーションを順番に逆方向に再生するように設定します。 anime-play-state は、アニメーションを一時停止するか再生するかを設定します。これは通常、js と組み合わせて使用する必要があります。クリックしてこの属性に対応する値を変更し、アニメーションを一時停止して再生します。たとえば、1 回クリックすると再生が一時停止され、もう一度クリックするとアニメーションの再生が継続されます。そうすれば、その値の一時停止と実行が理解しやすくなります。
上記は基本的に、このTwitterのようなアニメーションに基づいたCSSアニメーション属性の一般的なメソッドの簡単な紹介です。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
