动画
动画是CSS3中最具有颠覆的特征之一,可以设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果
相对于过渡,动画可以实现多变化,更多控制,连续自动播放等效果
制作动画分为两步:
定义动画
/* 定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translate(0);
}
/* 结束状态 */
100% {
transform: translate(1000px);
}
}
0%是动画的开始,100%是动画的完成,这样的规则就是动画序列
在@Keyframes中规定某项CSS样式就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间,或用关键词from和to,等同于0%和100%
调用动画
div {
width: 200px;
height: 200px;
background-color: #f0f;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
}