CSS3-Day72_html/css_WEB-ITnose のアニメーション効果

以前「CSS だけで div を動かす」を実装したことをまだ覚えていますか? はい、transition のターゲットも比較的限定されており、回転角度のみです。もちろん、マウスを置いたときにのみトリガーできるという制限もあります。別のスタイルでも、変更は比較的単調ですが、本当にアニメーション効果を実現するには、CSS3 に非常に効果的な方法があります: @keyframes。

まず、その仕様と使い方を知っておく必要があります

transition の使い方をまだ覚えていますか: div{transition: width (height, transform) 5s; width: 100px;} を最初のスタイルに追加し、次に div :hover{ width: 300px}、これはトランジション効果を実現する方法ですが、アニメーションはどうなるでしょうか?

ここでのアニメーションは、 まずアニメーションの全体的な効果を記述し、次にアニメーションを実装するオブジェクトをバインドすることです

記録用に w3cschool から変更された例を次に示します:

@keyframes myfirst{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;transform:rotate(100deg);}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}@-moz-keyframes myfirst /* Firefox */{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;transform:rotate(100deg);}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0px;transform:rotate(100deg);}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}@-o-keyframes myfirst /* Opera */{0%   {background: red; left:0px; top:0px;}25%  {background: yellow; left:200px; top:0pxl;transform:rotate(100deg);}50%  {background: blue; left:200px; top:200px;}75%  {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}

次のような別の例を見つけてください。このオブジェクトはバインドされていますが、このオブジェクトに何か問題はありましたか? left と top は距離を表すために使用されます 絶対位置 なので、HTML 部分

を書いてバインドしましょう:

一般的な手順 1: まず「アニメーション効果」が完了していることを確認します。 2. アニメーション効果を実現するオブジェクトを見つけます。 3. アニメーション効果を実装するオブジェクトにバインドします。以上です。

しかし、注意しなければならないのは、この

バインドには条件付き があり、その条件は何でしょうか?

1. どのアニメーション効果をバインドするかを決定します。 2. アニメーション効果を実現するのにどれくらいの時間がかかりますか?

もちろん、これが最も基本的なものです。さらに良いことには、次の属性から設定することもできます:

1. アニメーション効果の実行回数を設定します。すべての回数が実行された後でも、アニメーションは消えてしまうことをここで明確にする必要があります

2. アニメーションの方向、アニメーション効果を実現する方法、通常の順序か逆の順序か。

3. 、アニメーションの実行中の効果、一時停止するか実行するか。知らず知らずのうちにたくさんの CSS3 を見てきたので、ここ数日見ていなかったいくつかの場所を週末に勉強することにします。