基本用法
以下是 `@keyframes spin` 的基本实现：
css
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 使用动画 */
.spinning-element {
animation: spin 2s linear infinite;
}
参数说明
- **动画名称**：`spin` 是自定义名称，可以替换为任何合法标识符
- **持续时间**：`2s` 表示完成一次旋转需要2秒
- **时间函数**：`linear` 使旋转速度保持均匀
- **循环次数**：`infinite` 表示无限循环旋转
进阶用法
你可以通过以下方式扩展旋转动画的效果：
css
/* 反向旋转 */
@keyframes reverseSpin {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
/* 脉动旋转（结合缩放） */
@keyframes pulseSpin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
/* 应用不同的旋转效果 */
.loader {
animation: spin 1.5s linear infinite;
}
.reverse-loader {
animation: reverseSpin 2s linear infinite;
}
.pulse-loader {
animation: pulseSpin 3s ease-in-out infinite;
}
浏览器兼容性
`@keyframes` 动画在现代浏览器中得到广泛支持，但为了兼容旧版浏览器（如 IE 10+），建议添加 `-webkit-` 前缀：
css
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.spinner {
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
这种旋转动画常用于加载指示器、进度图标或强调交互元素。