动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果;
相较于过渡,动画可以实现更多变化,更多控制,连续自动播放等效果;
1、制作动画:先定义动画;再使用(调用)动画;
(1)用keyframes 定义动画 (类似定义类选择器)
@keyframes 动画名称 {
0%{
width:100px;
}
100%{
width:200px;
}
}
动画序列:1.0%是动画的开始,100%是动画的完成;
(2)在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果;
(3)动画是使元素从一种样式逐渐变化为另一种样式的效果,可以改变任意多的样式任意多的次数;
(4)可以使用百分比来规定变化发生的时间,或用关键词“from”和“to“,等同于0%和100%;
2、元素使用动画
animation-name:动画的名称;
animation-duration:动画的时长;
3、动画的常用属性
@keyframes 规定动画;
animation 所有动画属性的简写属性,除了animation-play-state属性;
animation-name 规定@keyframes动画的名称(必须);
animation-duration 规定动画完成一个周期所花费的秒或毫秒,默认是零; (必须)
animation-timing-function:规定动画的速度曲线,默认是“ease”。
animation-delay:规定动画何时开始,默认是0;
animation-iteration-count:规定动画被播放的次数,默认是1,还有“infinite”无限循环;
animation-direction:规定动画是否在下一周期逆向播放,默认是“normal”,“alternate”逆播放;
animation-play-state:规定动画是否正在运行或暂停,默认是“running”,还有“paused”;
animetion-fill-mode:规定动画结束后的状态,保持“forwards”回到起始“backwards”;
简写属性:animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态;
(1)简写属性里不包含animation-play-state;
(2)暂停动画:animation-play-state:paused;经常和鼠标经过等其他搭配使用
(3)想要动画走回来,而不是直接跳回来:animation-direction:alternate;
(4)盒子动画结束后,停在结束位置:animation-fill-mode:forwards;
4、step帧
steps(number_of_steps, direction),这个函数叫做阶梯函数,这个函数能够起到定格动画的效果。
阶梯函数不像其他定时函数那样,平滑的过渡,而是以帧的方式过渡。有两个参数:
(1) number_of_steps :阶梯数(必须是一个正整数),他将动画的总时长按照阶梯数等距划分
(2)direction :可选值为start或end,默认end,也可以不写;start表示动画的第一帧会被立即执行,直接从第二帧开始,然后以第一帧结束;end则表示动画从第一帧开始到正常结束;