网络动画世界已成为巨大的工具和技术丛林，例如GSAP和Framer Motion和Rects Spring。它像雨一样涌现，帮助Web项目开发将动作增加到DOM。
但是，最基本和最关键的部分是在CSS中。它是大多数前端开发人员学习的第一个动画工具。Web的大多数交互式动画都是由CSS完成的。
前面介绍的“ CSS交互式动画指南”的“关键帧将得到理解，并在本文中了解了有关CSS动画的更多信息。文章中涉及的代码示例可以单击以查看动画效果。
创建动画所需的主要角色是一些CSS属性会改变。下面是鼠标徘徊时移动的按钮的示例。没有动画：
当鼠标徘徊在按钮上时，此剪辑使用伪类来指定其他CSS语句，类似于JavaScript中的事件。
为了将元素移至右侧，尽管可以使用保证金-HEFT，但这是一种更好的方法。
从上述效果来看，按钮的运动非常僵硬，以下是增加属性的按钮：
属性值可以具有多个值，但有两个值是必要的：
如果为多个属性设置了动画，则将逗号分隔的列表用作属性值：
有一个特殊的值：也就是说，将动画效果添加到任何CSS属性的更改中。
在将一个位置到另一个位置的元素讲述时，浏览器需要计算每个过渡。
例如，假设将元素从左到右移动，则持续时间为1秒，并且应以速度切换光滑的动画，这意味着60个单独的位置需要从头开始和结束，就像电影一样膜。如果是均匀分布的，每个光圆都代表一个框架动画。当圆从左向右移动时，这些是向用户显示的帧，如下：
在此动画中，使用了线性正时函数，这意味着该元素以恒定的速度移动。图片中圆圈中每个帧的数量相同。
CSS中有几种动画效果，并指定了属性：
轻松的效果涌入，但耗尽了能量。最后，它像昏昏欲睡的乌龟一样慢慢向前移动。
从图片效果来看，可以看出前几个帧的速度是特殊的，并且最终会迅速降低。
轻松效果的效果恰恰相反。洗衣机有点脱水，开始缓慢旋转，然后迅速加速。
便捷是前两个动画效果的组合：
轻松不是对称的。它的特征是短期加速和大减速。
这是默认值。如果没有指定的动画效果，则默认情况下将使用它。
如果自定义曲线提供的构建 - 选项无法满足需求，则可以使用Bessel功能自定义缓慢的曲线。
从上面的语法中，您可以看到所有值都是此函数的预设值。它需要4个数字，代表2个控制点。重新定义相应的预设值，我建议在线工具Cubzier，
调试令人满意的动画曲线后，单击顶部的“复制”并将其粘贴到CSS中以获得相应的动画效果。
您也可以从此宽松功能平滑功能扩展中进行选择。最主要的是，某些效果CSS支持不是很好，您需要根据实际情况进行选择。
如前所述，动画应该以速度运行。眼睛。对于动画速率，需要设置合理的价值。否则，框架将被丢弃。
在实践中，绩效差通常以可变帧速率的形式出现。动画表演非常深入且有趣。请勿在此处详细介绍它，但是仍然需要以下几点来理解：
根据最终用户浏览器和操作系统之间的区别，下图的效果具有很小的缺陷：
仔细观察按钮，并注意到它们在转换的开始和结束时略微移动，这是由于计算机的CPU和GPU之间的切换引起的。当使用元素和设置动画时，浏览器有时会尝试优化的效果这个动画。它不是每个帧上像素的光栅，而是将所有内容作为纹理传输到GPU，而GPU擅长于这种类型的基于纹理的转换。因此，它获得了非常平滑且高性能的动画。这称为IT。
因此，硬件加速度也称为GPU加速度。这是一种优化解决方案，使用GPU渲染以减少CPU操作。由于CSS属性（例如GPU中的转换）不会触发重定向，因此它们可以大大提高网页的性能。
您可以通过添加以下CSS属性来设置硬件加速度：
向Web开发人员提供一种通知元素更改的方法，以便浏览器可以在实际更改元素属性之前先提前进行相应的优化准备。
允许浏览器声明为所选元素设置动画，并优化这种情况，以便浏览器将保持GPU处理此元素。不再需要在CPU和GPU之间进行切换，而不再需要。
CSS中的以下属性触发硬件加速度：
如果有一些元素不需要使用上述属性，但是您需要触发硬件加速效果，则可以使用一些技巧来诱导浏览器来打开硬件加速度，如下所示：
即使（或）此hack方法（有时也称为转换）使浏览器可以加速硬件或行为，从而将简单的3D更改添加到简单的3D更改中，以在三维空间中以实现硬件加速度。
前面介绍的“ CSS Interactive Animation指南的关键帧”与本文相结合，基本上可以将相应的改进动画增加到前端项目。