2017-06-18

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:让动画轮流反向播放

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,776评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,826评论 0 11
  • 还可以参考这篇:http://www.cnblogs.com/shenfangfang/p/5713564.htm...
    Mandy_jin阅读 4,914评论 0 3
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 5,846评论 0 4
  • 早起也是一种生命纬度的拓宽。早起看到的宁静与晚上熄灯之后看到的宁静是截然不同的。 时刻保持一个很觉知和放松的状态下...
    啊杜_阅读 1,729评论 0 0