详解 动画规则keyframes animation

keyframes   定义动画规则

animation 使用定义的动画规则

// 3d旋转
@-webkit-keyframes haha1 {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
  }
  50% {
    -webkit-transform: rotate3d(0, -0.5, 0, 180deg);
  }
  100% {
    -webkit-transform: rotate3d(0, -1, 0, 360deg);
  }
}

 .imgimg {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    -webkit-animation: haha1 3s linear infinite;//这里需要兼容写法哈我这里没处理
  }

这是在3D选择的我没截gif

步骤1 先定义动画规则，@keyframes，在这个规则里面haha1是你要命名的动画名称，在之后transform来定义你要旋转还是平移还是其他

有了动画规则之后呢，我就就要使用它，就需要animation

 

animation: haha1 3s linear infinite;

 第一个是定义的动画规则  3s指的是完成这个动画需要好多时间  linear代表动画开始到结束速度是一样的，它默认不是这个值

infinite代表无限循环，就是一直播放动画的意思，具体还是看官网，其他属性不常用