animation movie
is one subversive CSS3 feature, can be accurately controlled, or a group of a movie, a plurality of common nodes is achieved by providing a complicated animation.
Syntax:
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
(In addition to the name, the animation time delay, there are strict requirements of other random order)
@keyframes 动画名称 {
from{ 开始位置 } /*0%*/
to{ 结束 } /*100%*/
}
animation-iteration-count: infinite; infinite loop
animation-play-state: paused; suspended animation "
Case:
img {
/*animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;*/
animation: car 5s infinite; /*引用动画*/
}
/*定义动画*/
@keyframes car {
0% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(1000px, 0, 0);
}
51% {
transform: translate3d(1000px, 0, 0) rotateY(180deg);
/*如果多组变形 都属于 tarnsform 我们用空格隔开就好了*/
}
99% {
transform: translate3d(0, 0, 0) rotateY(180deg);
/*如果多组变形 都属于 tarnsform 我们用空格隔开就好了*/
}
}