详解动画规则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

详解动画规则keyframes animation

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

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

animation: haha1 3s linear infinite;

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

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

这里总结一下这几个容易让人误解的

keyframes是定义动画规则，与annimation配合使用，transform是转变的意思它的属性有平移translate、scale缩放、rotate旋转、skew倾斜等等

transition则是过渡的意思，一般指重一个效果变成另一个效果需要的时间（不然一下子就变了体验感不好，给人的感觉就是很不好）

举个栗子：

div
{
    width:100px;
    height:100px;
    background:red;    
}

div:hover
{
    width:300px;
}

移入太突兀了，一下了就变了，

transition:width 2s;

第一个div的样式里面加入这句话，指定属性变化及时间，这就很舒服了啊

详解动画规则keyframes animation

转速曲线你也可以设置为linear（宽度变化重开始到结束的速度是一样的，默认跟animation里面那个一样都是慢速--快速--慢速）