为什么您应该关心完善CSS动画

我关于CSS动画的故事始于我试图弄清楚如何成为编程世界中的独角兽时，为后端工作而设计用户界面（UI）之间的混合，这对我来说是非常令人印象深刻且艰辛的，一个拥有完全的理论/学术知识基础的人，但是有一次，我的童话教母出现在我的眼前，纯CSS动画使我的页面栩栩如生，并开始给我带来我需要的魔力... 创造力。

是的，您可以大笑，因为CSS动画无法与Javascript或jQuery动态地进行比较，但是，即使您不敢相信， CSS也是当今最有效的动画方法之一 。 这是为什么？ 让我们来谈谈它...

应用 ， 平台或网页解决了必要性 ，这是开发人员必须坚持的主要目标 ，但是要实现该目标，您需要注意倾斜的细节，用户对使用的UI抱有很高的期望，在整个访问过程中更改其功能的元素（ 动画 ），可以很好地达到这一特定点并改变某人在网络上的体验，无论您使用台式机还是移动设备都没有关系，它将影响整个体验在心理层面上，当然可以从下载或访问中反映出来。

然后... CSS为您提供了什么？

CSS动画为您提供了非常明确的应用功能：

• 动画中的变化状态或插值状态称为关键帧状态，它定义了动画的what（动画元素），when（动画时间轴）和how（动画的行为代码），您可以使用@keyframe规则进行操作 。
• 不断变化的功能是元素的CSS属性，因为您从一开始就在创建元素时就定义了它们，所以易于控制。
• 浏览器本身通过优化二重奏的响应度/效率来管理动画，从而解决了各种屏幕分辨率问题，从而使动画运行得更快。

快速 简便地使用动画，如果您按照@keyframe规则完成动画，则CSS动画的简单性是其实现如此广泛地传播，甚至在社区中被称为“硬件加速”或“移动友好”动画 ，“因为它是浏览器的职责所在。

但是，在CSS中，一切都有其优缺点：

• 关键帧状态不具有完全的灵活性，这意味着您无法控制动画在插值状态之间的行为方式（是的，您可以使用Javascript进行操作，但会花费一定的速度）。
• 您将面临浏览器兼容性问题，需要牢记这一点。
• 在旧的浏览器，你将不得不前缀与-moz你的关键帧，-webkit，-ms，-o相应的文本或使用真棒库 。

所有这一切都让你在复杂或如何能够绘制一些限制的，它的简单性也是一个不错的功能。 因此，这个问题仍然存在，甚至，我们可以通过提出以下问题来扩展它： 为什么您应该为CSS动画而烦恼？

这个问题背后的真相很简单，就像在CSS中制作动画一样简单，这是个平衡问题 。 多亏您的信任，CSS动画只涉及“一个动作”（ 声明性方法 ），这使元素可以在整个过程中表达行为，而无需任何明确的控制，这不仅为您提供可读的代码，还为您提供维护的便利，以及与之相反的自然规律，即JavaScript动画的命令式方法 （在代码中明确控制流），当动画只需要针对特定​​元素的特定动作时，您可以集中精力关注CSS，从而为产品提供平衡。 当您需要复杂性和控制性时（本文中未讨论），或者可能是两种方法之间的混合，您可以使用Javascript动画，从外观到行为，为您提供完整，均衡的产品。

结论？

CSS动画是Web开发的重要组成部分，并且编程世界正以前所未有的速度进入声明式方法（由于阴影中一些聪明的人），无论它的好坏，我不确定，但这意味着作为开发人员，您需要更多地关注于什么，而更少地关注于方法。

（顺便说一下，没人会鼓掌您，但是用户会更多地与您的产品互动，谁会不喜欢它？）。

随机附件...

制作自己的自定义动画的一些好的入门技巧：

• 始终首先考虑要提供的内容和外观。 无论是用纸还是软件，都可以*发挥创造力并开始绘图。
• 选择需要设置动画的元素，然后确定您要进行哪些更改。
• 输入并从练习开始。
• 尝试使用不同的CSS属性，CSS动画适用于所有元素和:: before / :: after伪元素，这为尝试CSS艺术提供了很大的可能性。
• 分开关键帧逻辑的样式/艺术，牢记元素所发生的事情的最佳方法之一是写一个有关元素行为的问题列表，并用“是”或“ “没有”。
• 最后但同样重要的一点，请确保您了解“ 关键渲染路径” 。
• 采用 性能开发工具 在您的浏览器中。

请记住，创意可以改变您的世界。

From: https://hackernoon.com/why-you-should-care-about-perfecting-css-animations-hf7y3y2p