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

使用CSS animation实现元素旋转动画的核心步骤是定义@keyframes关键帧规则，并通过animation属性将其应用到目标元素，同时可结合transform-origin调整旋转中心点，通过调整动画参数实现反向、单次或交互触发等变体效果。

1. 定义关键帧（@keyframes）通过@keyframes创建动画序列，指定元素从起始角度到目标角度的旋转过程。例如实现360度顺时针旋转：

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

   from和to可替换为百分比（如0%和100%），支持多阶段动画（如0%、50%、100%）。

   旋转角度需使用deg单位（如360deg），不可省略单位。

2. 应用动画到元素在目标元素上设置animation属性，调用关键帧并配置参数：

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

   参数说明：

   rotate360：关键帧名称。

   2s：动画持续时间（可替换为ms，如2000ms）。

   linear：速度曲线（匀速），其他可选值：

   ease：默认缓动效果（慢-快-慢）。

   ease-in：加速开始。

   ease-out：减速结束。

   cubic-bezier(n,n,n,n)：自定义曲线。

   infinite：无限循环播放（可替换为具体次数，如3）。

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

• 常用值：

  关键字：center（默认）、left、right、top、bottom。

  组合值：left top（左上角）、right bottom（右下角）。

  百分比/长度：50% 75%（水平50%、垂直75%）、10px 20px（具体像素值）。

1. 反向旋转（逆时针）修改关键帧中的角度为负值：

   @keyframes rotateBackward { to { transform: rotate(-360deg); }}.rotate-backward { animation: rotateBackward 2s linear infinite;}

2. 单次执行动画将animation-iteration-count设为1（或直接在animation简写中指定）：

   .rotate-once { animation: rotate360 1s ease-out 1;}

3. 悬停触发旋转通过:hover伪类触发动画，使用forwards保持结束状态：

   .rotate-on-hover { transition: none; /* 避免与transition冲突 */}.rotate-on-hover:hover { animation: rotate360 0.5s ease-in forwards;}

4. 脉冲式旋转（往返）在关键帧中定义往返角度：

   @keyframes pulseRotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); }}.pulse-rotate { animation: pulseRotate 3s ease-in-out infinite;}

1. 单位与语法：

   旋转角度必须使用deg单位（如360deg），不可省略或写为“度”。

   transform需包含在关键帧中，否则动画无效。

2. 性能优化：

   优先使用transform和opacity实现动画（硬件加速支持）。

   避免在动画中使用width、height等会触发重排的属性。

3. 浏览器兼容性：

   现代浏览器均支持@keyframes和animation，如需兼容旧版浏览器，可添加前缀：@-webkit-keyframes rotate360 { /* Safari/Chrome旧版 */ }@keyframes rotate360 { /* 标准语法 */ }.rotate-element { -webkit-animation: rotate360 2s linear infinite; animation: rotate360 2s linear infinite;}

通过组合@keyframes、transform和animation属性，可灵活实现旋转方向、速度、次数及触发方式的定制化效果，适用于加载图标、按钮交互等场景。