首页 > Web开发 > 详细

css3整理--Animation

时间:2014-03-28 08:46:01      阅读:474      评论:0      收藏:0      [点我收藏+]

animation语法:

  1、动画的定义

  @keyframes IDENT {

    from { Properties:Properties value; }

    Percentage { Properties:Properties value; }

    to { Properties:Properties value; } }

  或者全部写成百分比的形式:

  @keyframes IDENT {

    0% { Properties:Properties value; }

    Percentage { Properties:Properties value; }

    100% { Properties:Properties value; } }

  其中 IDENT 是动画的名称,语义化即可。

  from指定动画开始时的属性值,可以使用百分比代替

  to指定动画结束时的属性值,也可以使用百分比代替

  Percentag可以指定中间任意多个值,来指定动画的轨迹

  2、动画的调用

  animation-name:‘wobble‘;/*动画属性名,也就是我们前面keyframes定义的动画名,支持指定多个动画,中间逗号分隔*/

  animation-duration: 10s;/*动画持续时间*/

  animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/

  animation-delay: 2s;/*动画延迟时间*/

  animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/

  animation-direction: alternate;/*定义动画方式,alternate指动画执行偶数次时向前播放,奇数次时向后播放*/

css3整理--Animation,布布扣,bubuko.com

css3整理--Animation

原文:http://www.cnblogs.com/charling/p/3627540.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!