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