使用css3属性做一个循环旋转的动画

做这个动画是使用css3中的animation 和 @-webkit-keyframes 组合使用来完成

//这是html部分代码
<div class="home">
    <img
      alt="logo"
      src="http://b-ssl.duitang.com/uploads/item/201206/26/20120626190359_MjB3s.jpeg"
      id="images"
      style="width: 200px;height: 200px;border-radius: 50%;"
    />
  </div>
  
  //这是css部分代码
  #images {
  -webkit-animation: spin 5s linear infinite;
  animation: spin 5s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    transition: all 5s;
  }
}

上面的代码粘贴后直接就能运行，也可以绑定触发器，例如：#images 可以写为 #images:hover 表示给绑定了一个触发器hover，当鼠标在图片上方时动画才执行

下面我们简单介绍一下animation和@-webkit-keyframes的属性

animation （在使用的时候可以加上-webkit-做下兼容处理）是一个复合属性，定义如下：
animation: name duration timing-function delay iteration_count direction
name: 是 @-webkit-keyframes 中需要指定的方法，用来执行动画。

duration: 动画一个周期执行的时长。

timing-function: 动画执行的效果，可以是线性的，也可以是"快速进入慢速出来"等。

delay: 动画延时执行的时长，如果不需要可以省略。

iteration_count: 动画循环执行次数，如果是infinite，则无限执行。

direction: 动画执行方向，省略的话默认顺时针。

@-webkit-keyframes 为创建动画

@keyframes规则——指定一个CSS样式，动画将逐步更改样式。可以改变任意多的样式任意多的次数。
其中from和to 两个属性，“from” 和 "to"来规定变化发生的时间，就是指定动画执行的初始值和结束值。也可以用百分比，“from” 和 "to"分别等同于 %和100%，0%是动画的开始，100%是动画的完成。
-webkit-animation-play-state:paused; 暂停动画的执行。

animation和transition的区别

能实现动态效果的除了animation还有transition
transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。
transition必须使用触发器触发，animation可以使用触发器，也可以在页面加载完成的时候自动触发

想仔细了解各个属性的话可以看一下这篇文章，感觉写的很详细，https://www.cnblogs.com/bobodeboke/p/6252869.html