前端提高篇（五十三）CSS3进阶15：animation动画(1)

}

100% {

left: 600px;

}

}

前50%就已经到300px处了，所以前1s移动300px，后1s移动200px

如果关键正只有0%和100%，则可以用关键字’from’ 'to’代替0%和100%

@keyframes move {

from {

left:100px;

}

to {

left: 600px;

}

}

因为在css样式中，.demo已经设置了通常状态的left值：100px，且为关键帧移动的初始值，所以可以不在关键帧里写0% { left: 100px; }，直接写100%的就可以了

如果动画的初始位置不是样式中写的100px，0%就要写left

当动画效果做完之后，就回到通常状态了

在动画运动过程中，left一直都是样式设置的通常状态：100px，但是要完成动画而已

后四个属性：

animation-iteration-count：规定动画应该播放的次数

n：播放n次

infinite：无限次

案例：像音乐播放器，是一直转转转的

@keyframes move {

from {

transform: rota