1、CSS3动画以及animation事件的定义
animation :name duration timing-function delay iteration-count direction
animation-name:动画名称 animation-name:keyframename|none(keyframename:自定义名字 none:动画无效果)
animation-duration:动画执行时间 animation-duration:time(time:秒/毫秒)
animation-timing-function:动画速度曲线
【
animation-timing-function:value;
linnear:规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))
ease:规定以慢速开始的过渡效果(等于 cubic-bezier(0.25,0.1,0.25,1))
ease-in:规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))
ease-out:规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))
ease-in-out:规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值,可能的数值在0~1之间
steps(n):阶跃函数
】
animation-delay:动画效果延迟时间 animation-delay:time(time:秒/毫秒)
animation-iteration-count:动画执行次数 animation-iteration-count:n|infinite(n:具体次数 、infinite:无限重复)
animation-direction:动画执行方向 animation-direction:normal|alternate(normal:动画顺序播放、alternate:动画轮流反向播放)
animation-play-state:动画执行状态 animation-play-state:pause | running(paused:暂停动画、running:运行动画)
animation-fill-mode:动画执行过程效果是否可见
【
animation-fill-mode:none | forwards | backwards | both (none:不改变[默认值]、forwards:当动画完成后,保持最后一个属性值[在最后一个关键帧中定义]) 、backwords:在animation所指定的一段时间内,在动画显示前,应运开始属性值(在第一个关键帧中定义)、both:向前后相后填充模式都被应用
】
@keyframes:规定动画
@keyframes animationname {keyframes-selector{css-styles;}}
【
keyframes-selector :动画时长百分比
0~100%
from(与0%相同)
to(与100%相同)
可以只有一个to
css-styles:一个或者多个合法的css样式属性
】