标题：关于transition和keyframes
出处：刘新修
时间：Mon, 19 Oct 2015 21:08:21 +0000
作者：刘新修
地址：http://liuxinxiu.com:80/css3_transition_keyframes/

内容：
CSS代码
/***** transition 和 animation ******/  transition  /** 是页面元素的过渡效果，如鼠标划上旋转、变成等 **/  animation   /** 则是动画组，直接指向了动画关键帧，animation-name 对应 @keyframes neme{}  **/      animation-name          /** 动画名称 **/  animation-duration      /** 动画的时间 **/  animation-timing-function   /** 设置动画的过渡类型，一般去linear线性过渡 **/  animation-delay         /** 设置延时时间 **/  animation-iteration-count   /** 动画循环次数默认为1 ，infinite为无限循环 **/  animation-direction     /** 动画的方向分为正反，normal为正alternate反 **/  animation-play-state        /** w3c正在考虑是否将该属性移除，你建议使用！ **/  animation-fill-mode             /** 默认值为：none，设置forwards时停留在最后一帧; **/      /***** animation缩写：*****/  /*******************************************************************/  animation:name 1s linear 5s forwards; /*** 定义在随着一帧 ***/    animation:name 1s linear 5s infinite; /*** 一直循环动画 ***/    animation:mymove 1s linear 5s infinite forwards; /*** 错误的 ***/    /*** infinite 和 forwards 不可同时定义 ***/  /**********************************************************************/      @-webkit-keyframes name{      from {  }      to {  }  }  @-o-keyframes name{      from {  }      to {  }  }  @-moz-keyframes name{      from {  }      to {  }  }  @keyframes name{      from {  }      to {  }  }  
timing-function 作用于每两个关键帧之间，而不是整个动画



Generated by Bo-blog 2.1.1 Release