CSS样式在多个状态中进行转换,主要组成部分是:
1.一组定义的动画关键帧
2.描述该动画的CSS声明
关键帧表示动画的一个状态,多个关键帧就可以形成一组动画
关键帧语法规则:
@keyframes animationname{
keyframes-selector{css-style}
}
animationname是当前动画的名称
keyframes-selector:是关键帧选择器
css-style:当前关键帧的动画状态
animation属性,用于设置动画的名称、时间、时间曲线等属性,它是一个复合属性。
语法规则:
选择器{
animation:name duration timing-function delay iteration-count
}
animation-name:规定@keyframes动画的名称
取值: keyframe name:规定需要绑定到选择器的keyframe的名称
none:规定无动画效果(可用于覆盖来自级联的动画)
animation-duration:规定动画完成一个周期所花费的时间
取值: time值:以秒或者毫秒计算,默认是0
animation-timing-function:规定过渡效果的时间曲线
取值: linear:规定以相同速度开始至结束的过渡效果
ease:规定慢速开始,然后变快,然后慢速结束的过渡效果。
ease-in:规定以慢速开始的过渡效果
ease-out:规定以慢速结束的过渡效果
ease-in-out:规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。
animation-delay:规定开始之前需要等待的时间
取值: time值:以秒或毫秒计,默认是0
animation-iteration-count:规定动画播放的次数
取值: n:定义动画播放次数的数值,默认为1
infinite:规定动画应该为无限次播放
测试代码:
大家可以自己敲代码尝试一下动画的过程。