最近、ポータルサイトなどで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: 変換なしを意味します。
値:
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>]*
値の説明:
アニメーション期間は次のように使用されます。要素がアニメーションを再生する時間を指定します。値:
三、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:是用来指定元素动画开始时间。取值为
五、animation-iteration-count
语法：
animation-iteration-count:infinite | <number> [, infinite | <number>]*
取值说明：
animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值
六、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>] ]*
如下图所示
相信大家看完语法后，应该对于上面的例子很清楚了吧。不过话说回来动画是可以做了，但兼容它的浏览器不多啊，目前只有苹果，谷歌，火狐支持。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
