CSS3_html/css_WEB-ITnoseでのAnimationアニメーションの定義と呼び出し

最近、ポータルサイトなどでCSS3アニメーションを使った話題をよく見かけますが、ここで後々使いやすいようにアニメーションの知識を整理しておきましょう。次に、Animation アニメーションの定義と呼び出しを紹介します。Animation を紹介する前に、英語でキーフレームを意味する Keyframes

を理解する必要があります。フラッシュ内のフレーム。

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

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

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

none: 変換なしを意味します。 は、スペースで区切られた 1 つ以上の変換関数を意味します。つまり、回転、拡大縮小、平行移動など、要素に対して変換の複数の属性操作を同時に実行します。ただし、以前は重ね合わせたエフェクトがカンマ (「,」) で区切られていたことを思い出してください。 )、ただし、transform を使用する場合は、複数の属性をスペースで区切る必要があります。スペースで区切られることに注意してください。

値:

transform 属性は、SVG で実装できるものと同じ機能の一部を実装します。インライン要素とブロック要素で使用できます。要素を回転、拡大縮小、移動することができます。以下に、これらの属性値パラメーターの具体的な使用法をそれぞれ紹介します。

上記の構文

  @keyframes IDENT {     from {              Properties:Properties value;     }     Percentage {            Properties:Properties value;     }     to {            Properties:Properties value;     }   }

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

公式の例として、次のように明確に見ることができます:

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

ここでは、「ウォブル」と呼ばれるアニメーションを定義します。彼のアニメーションは 0 から始まります。 %で終了し、さらに40%と60%の2つの処理を経ます。 上記コードの具体的な意味は、ウォブルアニメーションが0%の場合、左から100pxの位置に要素を配置します。背景色が緑の場合、40% で要素は左が 150 ピクセル、背景色がオレンジの位置に遷移します。60% では、要素は左が 75 ピクセル、背景色が青の位置に遷移します。 . 最後に100%でアニメーションが終了した位置の要素が開始点に戻り、左が100pxになると背景色が赤に変わります。

アニメーションを定義した後、それを呼び出す方法は次のとおりです。

.box {     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;/*定义动画方式*/  }

上記を見てもよくわからないかもしれません。属性の構文を確認してから戻ってください。この例を見ると非常に明白です。

1. アニメーション名:

構文:

  animation-name: none | IDENT[,none | IDENT]*;

値の説明:

animation-name: はアニメーションの名前を定義するために使用されます。 これには主に 2 つの値があります: IDENT はキーフレームによって作成されたアニメーションの名前です。ここでの IDENT は、キーフレームの IDENT と一致している必要があります。一致しない場合は、アニメーション効果は得られません。値が none の場合、アニメーション効果はありません。さらに、属性は前述のトランジションと同じです。複数のアニメーションを同時に要素にアタッチすることができます。それらをカンマ「,」で区切るだけです。

2. アニメーション期間:

構文:

  animation-duration: <time>[,<time>]*

値の説明:

アニメーション期間は次のように使用されます。要素がアニメーションを再生する時間を指定します。値: は数値で、単位は s (秒) です。デフォルト値は「0」です。この属性は、transition のtransition-durationと同じように使用されます。

三、animation-timing-function:

语法：

   animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

取值说明：

animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率，说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样，具有以下六种变换方式：ease;ease-in;ease-in-out;linear;cubic-bezier。具体的使用方法如下：

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.

四、animation-delay:

语法：

  animation-delay: <time>[,<time>]*

取值说明：

animation-delay:是用来指定元素动画开始时间。取值为为数值，单位为s(秒)，其默认值也是0。这个属性和transition-delayy使用方法是一样的。

五、animation-iteration-count

语法：

  animation-iteration-count:infinite | <number> [, infinite | <number>]*

取值说明：

animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值为数字，其默认值为“1”；infinite为无限次数循环。

六、animation-direction

语法：

  animation-direction: normal | alternate [, normal | alternate]*

取值说明：

animation-direction是用来指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

七、animation-play-state

语法：

   animation-play-state:running | paused [, running | paused]*

取值说明：

animation-play-state主要是用来控制元素动画的 播放状态。其主要有两个值，running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样，可以通过paused将 正在播放的动画停下了，也可以通过running将暂停的动画重新播放，我们这里的重新播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播 放。另外如果暂时了动画的播放，元素的样式将回到最原始设置状态。这个属性目前很少内核支持，所以只是稍微提一下。

上面我们分别介绍了animation中的各个属性的语法和取值，那么我们综合上面的内容可以给animation属性一个速记法：

  animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*

如下图所示

相信大家看完语法后，应该对于上面的例子很清楚了吧。不过话说回来动画是可以做了，但兼容它的浏览器不多啊，目前只有苹果，谷歌，火狐支持。