css动画中简写旋转角度百分比

在css动画中，您希望自定义属性--rotate-angle的值随着百分比进度而增加。尽管可以使用逐个百分比值的方法，但还有一种简写方法。

为了简化编写，可以将自定义属性定义为角度属性。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

@property --rotate-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}</angle>

然后，在动画中使用以下代码：

@keyframes rotate {
  0% {
    --rotate-angle: 0deg;
  }

  100% {
    --rotate-angle: 360deg;
  }
}

#el {
  rotate: var(--rotate-angle);
  animation: rotate 3s linear;
}

这样，旋转动画即可根据百分比进度平滑进行。该方法消除了逐个定义每个百分比的需要，从而使代码更加简洁。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！