CSSアニメーションを深く理解するanimation_html/css_WEB-ITnose

× カタログ [1] 定義 [2] キーフレーム [3] アニメーション属性 [4] 複数値 [5] API

前の単語

遷移遷移は、初期状態と終了状態の間の滑らかな遷移を実現します。単純なアニメーション。アニメーションはキー フレーム @keyframes を使用して、より複雑なアニメーション効果を実現します。この記事では、アニメーションに関する関連知識を紹介します

定義

トランジションと同様に、アニメーションも複合属性であり、animation-name、animation-duration、animation-timing-function、animation-lay、animation-iteration- が含まれます。 count 、animation-direction、animation-play-state、animation-fill-mode、合計8つのサブ属性

[注] IE9-safari4-8、IOS3.2-8.4、android2.1-4.4には対応していません。 .4 を追加する必要があります - webkit-prefix

animation-name: 动画名称(默认值为none)animation-duration: 持续时间(默认值为0)animation-timing-function: 时间函数(默认值为ease)animation-delay: 延迟时间(默认值为0)animation-iteration-count: 循环次数(默认值为1)animation-direction: 动画方向(默认值为normal)animation-play-state: 播放状态(默认值为running)animation-fill-mode: 填充模式(默认值为none)

div{    width: 300px;    height: 100px;    background-color: pink;    animation-name: test;    animation-duration: 3s;    animation-timing-function: ease;    animation-delay: 0s;    animation-iteration-count: infinite;    animation-direction: normal;    animation-play-state: running;    animation-fill-mode: none;}/* 关于keyframes关键帧的内容稍后介绍     */@keyframes test{    0%{background-color: lightblue;}    30%{background-color: lightgreen;}    60%{background-color: lightgray;}    100%{background-color: black;}}

keyframe

アニメーションでは、まずキーフレームを使用してアニメーションを宣言し、次にアニメーションを使用してアニメーション

を呼び出す2つの手順が必要です。キーフレームの構文は @keyframes で始まり、その後にアニメーション名 anime-name が続きます。 from は 0% に相当し、to は 100% に相当します。パーセンテージに続く中括弧内のコードは、このときの対応するスタイルを表します

@keyframes animation-name{    from | 0%{}    n%{}    to | 100%{}}

【1】パーセンテージの順序は0%から100%まで並べる必要はなく、最終的にはブラウザが自動的に従うことになります。 0%-100% のオーダー Parse

[注意] 0% はパーセント記号を省略できません

@keyframes test{    100%{background-color: black;}    60%{background-color: lightgray;}    30%{background-color: lightgreen;}    0%{background-color: lightblue;}}

div{    width: 300px;    height: 100px;    background-color: pink;    animation-name: test;    animation-duration: 3s;    animation-iteration-count: infinite;}

[2] 負のパーセンテージまたは 100% を超えるパーセンテージがある場合、キーフレームは無視される

/* -20%和120%对应的代码无效*/@keyframes test{    -20%{background-color: red;}    0%{background-color: lightblue;}    30%{background-color: lightgreen;}    60%{background-color: lightgray;}    100%{background-color: black;}    120%{background-color: yellow;}}

[3] 0% または 100% でキーフレームが指定されていない場合は、要素のデフォルトの属性値が使用されます

/* 0%和100%对应的颜色是默认值pink*/@keyframes test{    30%{background-color: lightgreen;}    60%{background-color: lightgray;}}

[4] @keyframe が複数ある場合、ブラウザは、キーフレームの最後の @のみを認識します。

アニメーション名

アニメーション名

値: none |

/* 后面覆盖前面 */@keyframes test{    0%{background-color: lightblue;}    30%{background-color: lightgreen;}    60%{background-color: lightgray;}    100%{background-color: black;}}@keyframes test{    0%{background-color: blue;}    30%{background-color: green;}    60%{background-color: gray;}    100%{background-color: black;}}

【1】複数のアニメーションが同じプロパティを変更しようとすると、アニメーション リストの後部が前部をカバーします

/* 后面覆盖前面 */@keyframes test{    0%{background-color: lightblue;}    30%{background-color: lightgreen;}    60%{background-color: lightgray;}    100%{background-color: black;}}@keyframes test{}

【2】アニメーションの他の7つのサブプロパティとアニメーション名の長さが異なる場合、アニメーション名リストの長さが最終的な長さを決定し、余分な値は残らず、欠損値は順番に繰り返されます

<single-animation-name>: none | 自定义动画名称

/* animation-name的顺序是test1,test2，且它们修改的是同样的属性，后面覆盖前面，所以test2有效，test1无效 */div{    width: 300px;    height: 100px;    background-color: pink;    animation-name: test1,test2;    animation-duration: 3s;    animation-iteration-count: infinite;}@keyframes test2{    0%{background-color: blue;}    30%{background-color: green;}    60%{background-color: gray;}    100%{background-color: black;}}@keyframes test1{    0%{background-color: lightblue;}    30%{background-color: lightgreen;}    60%{background-color: lightgray;}    100%{background-color: black;}}

Duration

期間はアニメーションが完了するまでの時間を指します

animation-duration

値: [, ]*

初期値: 0s

適用対象: すべての要素

継承: なし

div{    width: 300px;    height: 100px;    position: relative;    background-color: pink;    animation-name: test1,test2,test3;    animation-duration: 3s,1s;    animation-iteration-count: infinite;}@keyframes test1{    0%{background-color: lightblue;}    30%{background-color: lightgreen;}    60%{background-color: lightgray;}    100%{background-color: black;}}@keyframes test2{    0%{font-size: 20px;}    30%{font-size: 30px;}    60%{font-size: 40px;}    100%{font-size: 50px;}}@keyframes test3{    0%{left: 0px;}    30%{left: 30px;}    60%{left: 40px;}    100%{left: 50px;}}

0s はアニメーションに時間がないことを意味し、期間を負の値にすることはできません

<div>测试文字</div>    

時間機能

アニメーションタイミング関数

値: deadff659e883256f901a5cb4d65383e [, deadff659e883256f901a5cb4d65383e]*

初期値:ease

適用対象: すべての要素

継承: なし

アニメーションの時間関数はトランジションの時間関数と似ています。時間関数は、アニメーション全体、またはキー フレームの特定の 2 つのパーセンテージの間に適用できます。 [,無限 |無限の場合は、無限アニメーションを意味します

アニメーションの方向

アニメーションの方向は、アニメーションを逆再生する必要があるかどうかを定義するために使用されます

animation-direction

値: ee380eaa4710cef6cacb9fd1007b9864[,f361781bc47b16abfb72172845e957b1 ]*

　　初始值: 0s

　　应用于: 所有元素

　　继承性: 无

<single-animation-delay>= <time>[,<time>]*

　　如果该值是负值，则表示动画的起始时间从0s变为延迟时间的绝对值。

 

填充模式

　　定义动画开始帧之前和结束帧之后的动作

　　[注意]android2.1-3不支持animation-fill-mode

animation-fill-mode

　　值: b266c5ab3aa460e6d006e64cd77b00be[,b266c5ab3aa460e6d006e64cd77b00be ]*

　　初始值: none

　　应用于: 所有元素

　　继承性: 无

<single-animation-fill-mode> = none | forwards | backwards | both

none: 动画结束后，元素移动到初始状态    [注意]初始状态并不是指0%的元素状态，而是元素本身属性值forwards: 元素停在动画结束时的位置    [注意]动画结束时的位置并不一定是100%定义的位置，因为动画有可能反向运动，也有可能动画的次数是小数backwards:在animation-delay的时间内，元素立刻移动到动画开始时的位置。若元素无animation-delay时，与none的效果相同    [注意]动画开始时的位置也不一定是0%定义的位置，因为动画有可能反向运动。both: 同时具有forwards和backwards的效果

　　[注意]当持续时间animation-duration为0s时，animation-fill-mode依然适用，当animation-fill-mode的值为backwards时，动画填充在任何animation-delay的阶段。当animation-fill-mode的值为forwards时，动画将保留在100%的关键帧上

 

多值

animation

　　值: 3a97bb3158a584e04a6fe2af335194f4[,3a97bb3158a584e04a6fe2af335194f4 ]*

　　初始值: 无

　　应用于: 所有元素

　　继承性: 无

<single-animation> = <single-animation-name> || <single-animation-duration> || <single-animation-timing-function> || <single-animation-delay> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

　　[注意]持续时间在前，延迟时间在后，若只存在一个时间，则是持续时间

div{    width: 300px;    height: 100px;    background-color: pink;    animation: 1s test1,infinite test2 2s 1s;}@keyframes test1{    30%{background-color: red;}    60%{background-color: blue;}    100%{background-color: green;}}@keyframes test2{    100%{color: white;}}

 

API

　　animation涉及到的事件有animationstart、animationend、animationiteration三个。这三个事件的bubbles都是yes，cancelalbe都是no

　　[注意]动画事件只支持DOM2级事件处理程序的写法

animationstart

　　发生在动画开始时

　　【1】如果存在delay，且delay为正值，则元素等待延迟完毕后，再触发该事件

　　【2】如果delay为负值，则元素先将初始值变为delay的绝对值时，再触发该事件

    oSb.addEventListener('animationstart',function(){        this.innerHTML = '动画开始';        this.style.background = 'lightgreen';    },false);

 

animationend

　　发生在动画结束时

test.addEventListener('animationend',function(){    this.style.background="lightgreen";    this.innerHTML = '动画结束';},false);

 

animationiteration

　　发生在动画的一次循环结束时，只有当iteration-count循环次数大于1时，触发该事件

var i = 0;oSb.addEventListener('animationiteration',function(){    i++;    this.innerHTML = i;},false);

【补充】

　　只有改变animation-name时，才会使animation动画效果重新触发

oSb.style.animationName = 'none';setTimeout(function(){    oSb.style.animationName = 'test';},100);