如何以及为什么
这可以是开始和结束，即两点，但也可以是更多。动画中的不同时间可能会发生不同的变化。 我们这样定义关键帧我们可以使用以下动画属性： 动画延迟：确定动画开始时的延迟时间。 动画方向：可用于向后播放动画，或者与“反向”或“交替”交替播放动画。 动画持续时间：动画的持续时间（以秒为单位）。 animation-fill-mode：设置元素未动画时的外观。 在我们已经确定了如何设置动画，现在出现的问题是哪些属性实际上可以设置动画。 原则上，我们可以为许多不同的属性设置动画，无论是框架的半径、字体颜色、背景颜色、阴影等。 很多都可以产生非常好的效果。例如，动画投影可以创建可感知的 3D 效果。 这是阴影动画的示例： Lea Verou 整理了 一份精彩的清单，列出了所有所谓的“可动画属性” ： 图 - 可动画属性 - Lea Verou 的概述 然而，并非所有属性都适合动画化。动画可能会对性能产生负面影响，并且某些属性在这方面表现不佳。 以下属性对于浏览器动 瑞士 电话号码 画来说是最节省资源的： 位置 注意，我们不会为“顶部”、“左侧”等设置动尺寸 在这里，我们也不使用“高度”和“宽度”，而是使用transform: scale(1) ; 回转 动画与transform: rotate(..deg) ;.正数使元素顺时针旋转，负数使元素逆时针旋转。 不透明度 动画与opacity: 0-1. 我们总结说，变换最适合动画，因为它们可以由浏览器快速且节省资源地实现。变换属性允许我们以节省资源的方式非常轻松地更改元素的大小、位置和旋转，而不必求助于“宽度”和“高度”或“左”、“顶”等属性。对这些属性进行动画处理可能会导致需要 GPU 性能的“重新绘制”。如果动画现在循环播放和运行，我们会不断加载浏览器，除了动画之外，浏览器还需要加载其他内容。
https://zh-cn.frnumbers.com/wp-content/uploads/2024/04/ss.png
因此：动画，是的，但要适度并关注 GPU。 动画的实际用例 加载屏幕 网站上一直使用动画。最常见的是缩短加载时间。当有东西移动时，加载屏幕看起来更有趣。许多网站将品牌徽标制作成动画，其他网站则采用所谓的“旋转器”。 下面是一些基于纯 CSS 的加载动画的示例： 更复杂的加载动画应使用 SVG（可缩放矢量图形）进行动画处理。加载动画的一个很好的经验法则：如果我需要多个 HTML 元素来构建动画，SVG 更合适。最终，我们希望保持标记尽可能干净和可读，并且不添加不必要的元素。 顺便说一下，在等待某些事情时总是可以使用加载动画。因此，不仅在重新加载页面时，而且在后台发生某些情况时在按钮上也是如此。这样我们就不会让用户失望，并提供网站当前正在处理某些内容的视觉反馈。
頁:
[1]