如何有效地处理CSS动画

时间:2015-07-09 09:40:57

标签: css

恕我直言,有三种方法可以为页面上的某些HTML元素声明动画:

  1. * { transition: all .3s ease; } - 关于代码行,文件大小和易用性,我发现这是处理页面上CSS动画的最合适的解决方案。但我知道使用星号选择器对性能有很大的影响,所以这个选项似乎不是最有效的选项。此外,这有时会导致不需要的对象上出现不需要的动画。
  2. .animated { transition: all .3 ease; } - 再次关于代码行,文件大小和易用性(在CSS中),这看起来像是最佳解决方案。我们专门为动画创建了一个类,只需将这个类添加到我们需要动画的所有元素上。可以与其他类别进行变化(调整速度等)。但是,这确实要求您想要动画的每个HTML元素都应该获得此类,这意味着当出于某种原因,类名更改一天时,所有这些引用都应该更新。
  3. .class1, .class2, .class3, ... { transition: all .3s ease; } - 此问题的另一个解决方案可能是为每个需要动画的HTML元素设置一个巨型选择器。这可能会导致一个巨大的CSS选择器,它不是文件大小友好,也不是非常易读的IMO。但是,它确实也有一些优点 - 每当元素需要动画时,只有一个地方可以更新。
  4. 所以我的问题是:

    在HTML网页上处理CSS动画的最有效方法是什么?

0 个答案:

没有答案