定义关键帧 Keyframes

主要的语法如下：

@keyframes animation_identifier { keyframe_selector {
        property: value;
        property: value;
      }
keyframe_selector { property: value; property: value;
} }

下面是几个简单的例子：

@keyframes fadeout { from {
opacity: 1; }
to{
opacity: 0;
} }

@keyframes color-pop {
0%{
color: black;
background-color: white; }
33% { /* one-third of the way through the animation */ color: gray;
background-color: yellow; }
100% {
color: white;
background-color: orange; }
}

---

设置关键帧动画

动画的命名

---

关键帧选择器

@keyframes W { from {
left: 0;
top: 0; }
25%, 75% { top: 100%;
} 50% {
top: 50%; }
to{
left: 100%; top: 0;
} }

---

声明动画元素

一旦创建了keyframe，就可以将其应用在元素或是伪类上。

命名动画

image.png

div {
animation-name: change_bgcolor;
}
div {
animation-name: change_bgcolor, round, W;
}

div {animation-name: change_bgcolor, bg-shift;}
@keyframes bg-shift {
0%, 100% {background-color: blue;} 35% {background-color: orange;} 55% {background-color: red;}
65% {background-color: purple;}
}
@keyframes change_bgcolor {
0%, 100% {background-color: yellow;} 45% {background-color: green;}
55% {background-color: blue;}
}

定义动画长度

image.png

div {
animation-name: change_bgcolor, round, W; animation-duration: 200ms, 100ms, 0.5s;
}

声明动画重复播放

image.png

animation-iteration-count: 2; 
animation-iteration-count: 5; 
animation-iteration-count: 13;

设置动画方向

image.png

.ball {
animation-name: bouncing; animation-duration: 400ms; animation-iteration-count: infinite; animation-direction: alternate-reverse;
}
@keyframes bouncing {
from {
transform: translateY(500px);
} to{
transform: translateY(0); }
}

动画延迟

image.png

div {
animation-name: move; animation-duration: 10s; animation-delay: -4s; animation-timing-function: linear;
}

改变内部动画时间函数

image.png

和transition类似：

image.png image.png

设置动画的播放状态

image.png

动画填充模式

image.png

@keyframes move_me { 0%{
transform: translateX(0); }
100% {
transform: translateX(1000px);
} }
.moved {
transform: translateX(0); animation-name: move_me; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: 0.6; animation-fill-mode: forwards;
}

---

动画的简写

image.png

#animated {
animation: 200ms ease-in 50ms 1 normal running forwards slidedown;
} #animated {
animation-name: slidedown; animation-duration: 200ms; animation-timing-function: ease-in; animation-delay: 50ms; animation-iteration-count: 1; animation-fill-mode: forwards; animation-direction: normal; animation-play-state: running;
}

---

动画，特异性和优先级

动画顺序

如果有很多动画针对的是同一属性，动画的顺序为从后往前，及后面的动画覆盖前面的，来看个例子：

#colorchange {
animation-name: red, green, blue; 
animation-duration: 11s, 9s, 6s;
}

最后的显示结果就是6秒的blue，3秒的green，2秒的red。

动画重复

.snowflake {
animation: spin 2s linear 5s 20;
}

上面例子中，雪花将会旋转20圈，每圈持续2秒，第一圈延迟5秒。

动画和UI 线程

css 动画在UI线程中迭优先级是最低的，UI线程可能某些时候把动画给关了。

---

打印动画

虽然在文稿上打印动画是不可能，不过会显示相关的动画属性，比如动画的效果是使元素的border-radius：50%，那么这一效果最终会被打印出来。