如何用css animation实现元素旋转动画

要实现元素旋转动画需使用CSS的@keyframes和animation属性。1. 定义@keyframes rotate360设置从0deg到360deg的旋转过程；2. 在目标元素上应用animation: rotate360 2s linear infinite实现匀速循环旋转；3. 可通过transform-origin调整旋转中心点如center top；4. 支持反向旋转、单次执行或hover触发等变体，关键在于正确使用transform: rotate()配合deg单位与动画参数。

要实现元素的旋转动画，可以通过 CSS 的 @keyframes 和 animation 属性来完成。核心是使用 transform: rotate() 配合关键帧定义动画过程。

1. 定义旋转的关键帧 (@keyframes)

使用 @keyframes 创建一个动画序列，指定元素从起始角度旋转到目标角度。

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

2. 将动画应用到元素上

在需要旋转的元素上设置 animation 属性，调用已定义的关键帧。

.rotate-element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  animation: rotate360 2s linear infinite;
}

• rotate360：对应 @keyframes 的名称
• 2s：动画持续时间为 2 秒
• linear：动画速度曲线为匀速
• infinite：循环播放动画

3. 可选：控制旋转中心点

默认旋转中心是元素中心（50% 50%），可通过 transform-origin 修改。

立即学习“前端免费学习笔记（深入）”；

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

0

查看详情

.rotate-element {
  transform-origin: center top; /* 从顶部中心旋转 */
}

• center：居中（默认）
• left top：左上角
• right bottom：右下角
• 50% 75%：自定义百分比位置

4. 常见变体示例

反向旋转（逆时针）：

@keyframes rotateBackward {
  to {
    transform: rotate(-360deg);
  }
}

只旋转一次（非循环）：

animation: rotate360 1s ease-out 1;

配合 hover 触发旋转：

.rotate-on-hover:hover {
  animation: rotate360 0.5s ease-in forwards;
}

基本上就这些。通过组合 keyframes、transform 和 animation 属性，可以灵活控制旋转方向、速度、次数和触发方式。不复杂但容易忽略细节，比如单位写成 deg 而不是度，或忘记加 transform 才能触发旋转。

以上就是如何用css animation实现元素旋转动画的详细内容，更多请关注php中文网其它相关文章！