CSS3のアニメーション属性の使い方を詳しく解説

アニメーションの紹介を始める前に、まず「キーフレーム」という特別なことを理解する必要があります。これは、Flash をプレイしたことがある人にはよく知られているかもしれません。この「キーフレーム」とは何かを見てみましょう。以前にトランジションを使用して単純なトランジション効果を作成したとき、初期属性と最終属性、開始アクション時間と継続アクション時間、およびアクションの変換率を含めました。実際、これらの値は次のとおりです。必要に応じて、すべての中間値を制御します。たとえば、最初の期間でどのようなアクションを実行するか、2 番目の期間でどのようなアクションを実行するかなどです (フラッシュに切り替えると、それは何を意味します)。最初のフレームで実行したいアクション、2 番目のフレームで実行したいアクション）、これを実現するために Transition を使用することは困難です。このとき、そのような「キーフレーム」も必要です。コントロールすること。次に、CSS3 アニメーションは「キーフレーム」属性を使用してこの効果を実現します。まずキーフレームを見てみましょう:

キーフレームには独自の文法規則があり、その名前は「@key

<br/>

frames」で始まり、その後に「アニメーションの名前」と中かっこの場合は「{」が続きます。 }" では、括弧内にさまざまな期間のスタイル ルールがいくつかあります。これは、CSS スタイルの記述方法に似ています。 「0%」から「100%」の間など、複数のパーセンテージで構成される「@keyframes」のスタイル ルールの場合、このルールで複数のパーセンテージを作成でき、各パーセンテージにアニメーション効果を持つ要素に必要なパーセンテージを与えます。さまざまな属性を追加して、要素の色、位置、サイズ、形状の移動、変更など、要素が常に変化する効果を実現できるようにします。ただし、注意すべき点の 1 つは、「fromt」と「to」を使用できることです。 「」はアニメーションの開始位置と終了位置を表します。つまり、「from」は「0%」、「to」は「100%」に相当します。このうち、「0%」は省略できません。他の属性値と同様に、ここにパーセント記号 (「%」) を追加する必要があります。そうでない場合、キーフレームは無効になり、効果がありません。キーフレームの単位はパーセンテージ値のみを受け入れるためです。 <br/>

<br/>

キーフレームは、アニメーションのアニメーション変更のキー位置を決定するために任意の順序で指定できます。具体的な文法規則は次のとおりです:

keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';   
 keyframes-blocks: [ keyframe-selectors block ]* ;   
 keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*

上記の文法をまとめます

@keyframes IDENT {   
     from {   
       Properties:Properties value;   
     }   
     Percentage {   
       Properties:Properties value;   
     }   
     to {   
       Properties:Properties value;   
     }   
   }  
   或者全部写成百分比的形式：

@keyframes IDENT {   
   0% {   
      Properties:Properties value;   
   }   
   Percentage {   
      Properties:Properties value;   
   }   
   100% {   
      Properties:Properties value;   
   }   
 }

IDENT はアニメーション名です。気軽に選択できます。もちろん、よりセマンティックである方が良いです。 Percentage はパーセンテージ値です。追加できます。このようなパーセンテージが多数あり、Properties は left、background などの CSS のプロパティ名、value は対応する属性の属性値です。 from と to はそれぞれ 0% と 100% に対応することに注意してください。これについては以前にも触れました。今のところ、Webkit コアを搭載したブラウザのみがアニメーション アニメーションをサポートしているため、上記に -webkit プレフィックスを追加する必要があります。Firefox5 では CSS3 のアニメーション プロパティをサポートできると言われています。

例を見てみましょう:

@-webkit-keyframes 'test' {   
     0% {   
        margin-left: 100px;   
        background: green;   
     }   
     40% {   
        margin-left: 150px;   
        background: orange;   
     }   
     60% {   
        margin-left: 75px;   
        background: blue;   
     }   
     100% {   
        margin-left: 100px;   
        background: red;   
     }   
  }

ここでは、「test」というアニメーションを定義します。そのアニメーションは 0% から始まり 100% で終了し、40% と 60% の 2 つのプロセスを経ます。上記のコードの具体的な意味は次のとおりです。テスト アニメーションが 0% の場合、要素は 100 ピクセルの左の位置に配置され、背景色は緑色になります。40% の場合、要素は 150 ピクセルの左の位置に遷移し、背景色はオレンジで、60% で要素は左の位置が 75 ピクセル、背景色が青に遷移し、アニメーションを 100% 終了する最後の位置要素は左の位置が 100 ピクセルの開始点に戻ります。そして背景色が赤になります。このアニメーションに 10 秒の実行時間だけを与えたと仮定すると、各セグメントの実行ステータスは次のようになります:

201586182405067.png (499×536)

<br/>

キーフレームを定義した後、どうする必要がありますか先ほど定義したアニメーションを「テスト」と呼びます

<br/>

CSS3 アニメーションは、時間の経過とともに要素の属性値を変更するものと似ています。これらの主な違いは、トランジションでは、時間の経過とともに CSS プロパティを変更するためにイベント (ホバー イベントやクリック イベントなど) をトリガーする必要があることです。アニメーションでは、イベントの属性値をトリガーせずに、時間の経過とともに要素の CSS を明示的に変更することもできます。アニメーション効果。このようにして、要素内でアニメーションのアニメーション属性を直接呼び出すことができます。これに基づいて、CSS3 アニメーションには明確なアニメーション属性値が必要です。これは、さまざまな時点で CSS 属性値を定義するためのキーフレームが必要であるということです。さまざまな期間で変化する要素の効果を実現します。

<br/>

要素のアニメーション属性を呼び出す方法を見てみましょう

.demo1 {   
     width: 50px;   
     height: 50px;   
     margin-left: 100px;   
     background: blue;   
     -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/  
     -webkit-animation-duration: 10s;/*动画持续时间*/  
     -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/  
     -webkit-animation-delay: 2s;/*动画延迟时间*/  
     -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/  
     -webkit-animation-direction: alternate;/*定义动画方式*/  
  }

CSS Animation动画效果将会影响元素相对应的css值，在整个动画过程中，元素的变化属性值完全是由animation来控制，动画后面的会覆盖前面的属性值。如上面例子：因为我们这个demo只是在不同的时间段改变了demo1的背景色和左边距，其默认值是：margin-left:100px;background: blue；但当我们在执行动画0%时，margin-left:100px,background:green；当执行到40%时，属性变成了：margin-left:150px;background:orange;当执行到60%时margin-left:75px;background:blue;当动画 执行到100%时：margin-left:100px;background: red;此时动画将完成，那么margin-left和background两个属性值将是以100%时的为主,他不会产生叠加效果，只是一次一次覆盖前一次出将的css属性。就如我们平时的css一样，最后出现的权根是最大的。当动画结束后，样式回到默认效果。

 以上就是CSS3中animation属性的使用详解的内容，更多相关内容请关注PHP中文网（www.php.cn）！