css3转动动画

CSS3转动动画是一种非常流行的动画效果，可以应用于很多项目中，如网站、手机应用等。这种动画效果利用了CSS3的旋转属性以及动画属性。

.rotate {
  width: 100px;
  height: 100px;
  background-color: #F00;
  position: relative;
  -webkit-animation: rotate 2s infinite linear;
  -moz-animation: rotate 2s infinite linear;
  -o-animation: rotate 2s infinite linear;
  animation: rotate 2s infinite linear;
}

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}
 
@-moz-keyframes rotate {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}
 
@-o-keyframes rotate {
  from { -o-transform: rotate(0deg); }
  to { -o-transform: rotate(360deg); }
}
 
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

上面的代码展示了一个简单的CSS3转动动画，主要包括一个正方形元素及相关的CSS属性和动画效果。其中，首先定义了元素的基本样式，包括宽度、高度、背景颜色和定位方式。然后，利用了CSS3的动画属性（animation）定义转动动画，并指定了动画的时间（2秒）、重复次数（无限）和动画方式（linear）。最后，通过定义一个keyframe集合，指定了动画的起点和终点，即使元素在2秒内沿着顺时针方向旋转360度。

总的来说，CSS3转动动画是一种非常不错的动画效果，可以为网站和应用增加一些炫酷和生动的元素，提升交互体验和用户体验。