定义关键帧 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%，那么这一效果最终会被打印出来。
