1. 简介
CSS3提供了很多好玩的特性，比如可以实现动画效果。在其中，旋转动画是常用的一种动画效果，在设计过程中可以起到很好的装饰、提示等作用。本篇文章将介绍CSS3实现一直旋转的动画效果。
2. 原理
2.1 CSS属性 transform
CSS3中提供了一个transform属性，可以实现元素的旋转、移动、缩放等效果。transform属性是一种比较基础的CSS属性，旋转动画效果中也是必不可少的一个属性。transform属性常用的值有：
rotate(angle)：旋转元素
translate(x, y)：移动元素
scale(x, y)：缩放元素
这里要介绍的是rotate(angle)值，它可以让元素按照指定的角度旋转。其中angle是一个单位为度数的数值，正值表示顺时针旋转，负值表示逆时针旋转。比如，rotate(45deg)表示顺时针旋转45度，rotate(-30deg)表示逆时针旋转30度。
2.2 CSS属性animation
实现一直旋转动画的另一个必不可少的CSS属性是animation，它可以在元素中定义动画效果。animation属性是一个比较高级的CSS属性，与transform属性、transition属性等一起，为实现各种复杂的动画效果提供了很好的支持。
animation属性的语法格式如下：
/* 语法格式 */
animation: name duration timing-function delay iteration-count direction fill-mode;
/* 示例 */
animation: rotating 3s linear 0s infinite normal none;
各个属性的含义如下：
animation-name：定义动画名称
animation-duration：定义动画持续时间
animation-timing-function：定义动画执行过程的速度曲线
animation-delay：定义动画在执行前等待的时间
animation-iteration-count：定义动画执行次数
animation-direction：定义动画是否反向播放
animation-fill-mode：定义动画在执行前和执行后的状态
其中，animation-name是定义动画的名称，对应CSS关键字@keyframes中的name；animation-duration是定义动画的持续时间，单位是秒或毫秒；animation-timing-function是定义动画执行过程的速度曲线，可以是常见的ease、linear、ease-in、ease-out、ease-in-out五种值之一，也可以是贝塞尔曲线函数，需要用cubic-bezier()函数来定义；animation-delay是定义动画在执行前等待的时间，同样是单位为秒或毫秒；animation-iteration-count是定义动画执行次数，可以为数字、infinite（表示无限次执行）或者关键字alternate（表示反向循环执行）；animation-direction是定义动画是否反向播放，可以是normal（表示正向播放）、reverse（表示反向播放）或alternate（表示正向、反向交替执行）；animation-fill-mode是定义动画在执行前和执行后的状态，可以为none（表示无状态）、forwards（表示执行完毕后元素保持动画结束的状态）或者backwards（表示执行前的起始状态）。
3. 实现
实现一直旋转的动画效果，需要用到transform属性和animation属性。具体步骤如下：
3.1 定义样式
首先，需要定义一个样式名，这里我们使用.rotate，表示要实现旋转效果的元素都使用这个样式。然后，需要添加属性transform-origin，它定义了旋转中心的位置。对于一个正方形的元素，如果想要其绕中心旋转，则该属性的值应该是50% 50%（也就是中心点的坐标值）。完整的样式代码如下：
.rotate {
transform-origin: 50% 50%;
}
3.2 定义动画
下一步是定义动画效果。这里使用CSS关键字@keyframes来定义动画名称（这里定义的是rotating）。具体步骤如下：
添加CSS关键字@keyframes，定义动画名称rotating
调用rotate(angle)旋转函数，设置旋转的角度
完整的代码如下：
@keyframes rotating {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
这里定义了关键字@keyframes，其中“rotating”就是动画的名称。在@keyframes中，设置0%的样式是初始样式，100%的样式是动画结束后的样式，其余的样式将会在动画执行过程中，从0%到100%的各阶段中应用。在这里我们只定义了两个样式，0%和100%，意味着动画只有一个循环，两者之间的所有样式都将过渡形成旋转动画。
其中transform: rotate(0deg) 表示初始状态样式不旋转，transform: rotate(360deg) 表示运行结束状态样式按顺时针方向旋转360度。
3.3 应用样式和动画
最后一步是将该样式和动画应用到元素上。在元素的class属性中加入.rotate样式名，并使用animation属性将rotating动画应用到该元素上。
.square {
width: 100px;
height: 100px;
background-color: #81C784;
border-radius: 15px;
animation: rotating 3s linear 0s infinite normal none;
}
.square.rotate {
transform-origin: 50% 50%;
}
@keyframes rotating {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
4. 总结
通过使用CSS的transform属性和animation属性，可以很方便地实现一直旋转的动画效果。其中，transform属性定义了元素的旋转（或移动、缩放）效果，animation属性则定义了元素的动画效果。这里重点介绍了rotate(angle)旋转函数和@keyframes关键字，具体实现效果可以参考上文例子。
值得注意的是，CSS3的动画效果在不同浏览器中可能存在兼容性问题，需要加上浏览器内核前缀。比如下面这个例子，除了animation属性以外，还需要加上webkit-内核、mozilla-内核、ms-内核、o-内核等前缀：
.square {
width: 100px;
height: 100px;
background-color: #81C784;
border-radius: 15px;
-webkit-animation: rotating 3s linear 0s infinite normal none;
-moz-animation: rotating 3s linear 0s infinite normal none;
-ms-animation: rotating 3s linear 0s infinite normal none;
-o-animation: rotating 3s linear 0s infinite normal none;
animation: rotating 3s linear 0s infinite normal none;
}
除此之外，还需要注意动画执行的持续时间、速度曲线、执行次数等设置，以及浏览器性能和渲染效率等问题。
参考文献：