css3中变形与动画（上）
1.Animation 动画定义animation动画2.Animation动画播放
1）设置动画播放方式
2）设置动画开始播放时间
3）设置动画播放方向
4）设置动画播放次数
5）动画时间外属性
3.定义动画
可以frames关词“from”和“to”等价于0%和100%css0%是动画的开始时间，100%是动画的结束时间
语法：@keyframes animationname{keyframes-sellector{css-style；}}参数：@keyframes：定义动画的名称keyframes-selector：动画时长的百分比ss-syle：一个或多个合法的css样式属性
4.动画的播放方式播放次数角度：infinite：无限次数播放播放速度角度：animation-timing-function：规定动画的速度曲线
语法：animation-timing-function:valuevalue:liner:动画从头到位的速度都是相同的ease：默认，动画以低速开始，然后加快，在结束前变慢ease-in 动画以低俗开始ease-out 动画以低俗结束ease-in-out 动画以低俗开始和结束cubic-bezier （x1,y1,x2,y2）在cubic-bezier函数中自己的值，可能的值是从0-1的数值5.设置动画播放时间：animation-delay 属性定义动画何时开始语法：animation-delay：time；animation-duration：定义动画完成一个周期所需要的时间，以秒或者毫秒计。
6.设置动画播放方向animation-direction 定义是否应该轮流反向播放动画语法：animation-direction：normal|alternatenormal：默认值，动画正常播放alternate：让动画轮流反向播放css3中变形与动画（上）
1.Animation 动画定义animation动画2.Animation动画播放
1）设置动画播放方式
2）设置动画开始播放时间
3）设置动画播放方向
4）设置动画播放次数
5）动画时间外属性
3.定义动画可以frames关键词“from”和“to”等价于0%和100%css0%是动画的开始时间，100%是动画的结束时间语法：@keyframes animationname{keyframes-sellector{css-style；}}参数：@keyframes：定义动画的名称keyframes-selector：动画时长的百分比ss-syle：一个或多个合法的css样式属性
4.动画的播放方式播放次数角度：infinite：无限次数播放播放速度角度：animation-timing-function：规定动画的速度曲线语法：animation-timing-function:valuevalue:liner:动画从头到位的速度都是相同的ease：默认，动画以低速开始，然后加快，在结束前变慢ease-in 动画以低俗开始ease-out 动画以低俗结束ease-in-out 动画以低俗开始和结束cubic-bezier （x1,y1,x2,y2）在cubic-bezier函数中自己的值，可能的值是从0-1的数值
5.设置动画播放时间：animation-delay 属性定义动画何时开始语法：animation-delay：time；animation-duration：定义动画完成一个周期所需要的时间，以秒或者毫秒计
。6.设置动画播放方向animation-direction 定义是否应该轮流反向播放动画语法：animation-direction：normal|alternatenormal：默认值，动画正常播放alternate：让动画轮流反向播放
网友评论