css3的自定义动画keyframes

css3有自定义动画功能,跟js的动画相比,虽然不能打断点,功能有限,存在兼容性问题。但操作简单,性能消耗小。所以,能用css3支持动画的时候,建议还是用css3的动画

这里简单介绍下keyframes动画

先贴一下代码


    img{
      display: block;
     transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      -webkit-transform-style: preserve-3d;
      animation: xj_pqzwb_cellMove124s linear infinite ;
      -moz-animation: xj_pqzwb_cellMove1 2s  linear  infinite;
      -o-animation: xj_pqzwb_cellMove1 2s  linear  infinite;
      -webkit-animation: xj_pqzwb_cellMove1 2s  linear  infinite;
      perspective: 400/@r;
      -moz-perspective: 400/@r;
      -o-perspective: 400/@r;
      -webkit-perspective: 400/@r;
    }
@keyframes xj_pqzwb_cellMove1 {
  0% {
    transform: rotate(0deg);
    transform-origin:81.5/@r 81.5/@r;/*定义动画的旋转中心点*/
  }
  100% {
    transform: rotate(360deg);
    transform-origin:81.5/@r 81.5/@r;/*定义动画的旋转中心点*/
  }
}
@-o-keyframes xj_pqzwb_cellMove1 {
  0% {
    transform: rotate(0deg);
    transform-origin:81.5/@r 81.5/@r;/*定义动画的旋转中心点*/
  }
  100% {
    transform: rotate(360deg);
    transform-origin:81.5/@r 81.5/@r;/*定义动画的旋转中心点*/
  }
}
@-moz-keyframes xj_pqzwb_cellMove1 {
  0% {
    transform: rotate(0deg);
    transform-origin:81.5/@r 81.5/@r;/*定义动画的旋转中心点*/
  }
  100% {
    transform: rotate(360deg);
    transform-origin:81.5/@r 81.5/@r;/*定义动画的旋转中心点*/
  }
}
@-webkit-keyframes xj_pqzwb_cellMove1 {
  0% {
    transform: rotate(0deg);
    transform-origin:81.5/@r 81.5/@r;/*定义动画的旋转中心点*/
  }
  100% {
    transform: rotate(360deg);
    transform-origin:81.5/@r 81.5/@r;/*定义动画的旋转中心点*/
  }
}
看着很长,其实都是兼容性标签,正经来说,就下面这几句
    img{
      display: block;
     transform-style: preserve-3d;
      animation: xj_pqzwb_cellMove124s linear infinite ;
      perspective: 400/@r;
    }
@keyframes xj_pqzwb_cellMove1 {
  0% {
    transform: rotate(0deg);
    transform-origin:81.5/@r 81.5/@r;/*定义动画的旋转中心点*/
  }
  100% {
    transform: rotate(360deg);
    transform-origin:81.5/@r 81.5/@r;/*定义动画的旋转中心点*/
  }
}
 简单介绍下。首先是个img标签,transform-style顾名思义,就是旋转的


随机浏览