关于transition和keyframes

大 | 中 | 小
[不指定 2015/10/19 21:08 | by 刘新修 ]
CSS代码
  1. /***** transition 和 animation ******/  
  2. transition  /** 是页面元素的过渡效果，如鼠标划上旋转、变成等 **/  
  3. animation   /** 则是动画组，直接指向了动画关键帧，animation-name 对应 @keyframes neme{}  **/  
  4.   
  5.   
  6. animation-name          /** 动画名称 **/  
  7. animation-duration      /** 动画的时间 **/  
  8. animation-timing-function   /** 设置动画的过渡类型，一般去linear线性过渡 **/  
  9. animation-delay         /** 设置延时时间 **/  
  10. animation-iteration-count   /** 动画循环次数默认为1 ，infinite为无限循环 **/  
  11. animation-direction     /** 动画的方向分为正反，normal为正alternate反 **/  
  12. animation-play-state        /** w3c正在考虑是否将该属性移除，你建议使用！ **/  
  13. animation-fill-mode             /** 默认值为：none，设置forwards时停留在最后一帧; **/  
  14.   
  15.   
  16. /***** animation缩写：*****/  
  17. /*******************************************************************/  
  18. animation:name 1s linear 5s forwards; /*** 定义在随着一帧 ***/  
  19.   
  20. animation:name 1s linear 5s infinite; /*** 一直循环动画 ***/  
  21.   
  22. animation:mymove 1s linear 5s infinite forwards; /*** 错误的 ***/  
  23.   
  24. /*** infinite 和 forwards 不可同时定义 ***/  
  25. /**********************************************************************/  
  26.   
  27.   
  28. @-webkit-keyframes name{  
  29.     from {  }  
  30.     to {  }  
  31. }  
  32. @-o-keyframes name{  
  33.     from {  }  
  34.     to {  }  
  35. }  
  36. @-moz-keyframes name{  
  37.     from {  }  
  38.     to {  }  
  39. }  
  40. @keyframes name{  
  41.     from {  }  
  42.     to {  }  
  43. }  

timing-function 作用于每两个关键帧之间，而不是整个动画

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(4216)