简化css动画中旋转角度百分比的表示方式
在 css 动画中，使用自定义属性 --rotate-angle 来控制元素的旋转角度，通常需要定义逐个百分比的属性值，例如从 0% 到 100% 每 1% 增加一个新的值。
为了简化书写方式，我们可以通过将自定义属性定义为角度属性来实现。具体步骤如下：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
在 css 中定义自定义属性 --rotate-angle 的语法类型为角度：
在动画关键帧规则中使用 --rotate-angle 属性值，而无需逐个百分比指定：
在需要应用旋转动画的元素上，使用 rotate 属性引用 --rotate-angle 值：
通过这种方式，只需定义关键帧的开始和结束角度，即可实现随百分比进度平滑过渡的旋转动画。
立即学习
“
前端免费学习笔记（深入）
”；
@property --rotate-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
} @keyframes rotate {
0% {
--rotate-angle: 0deg;
}
100% {
--rotate-angle: 360deg;
}
}#el {
rotate: var(--rotate-angle);
animation: rotate 3s linear;
}