CSS动画的局限性

Before you start to experiment in moving elements with CSS it’s useful to know what can’t be animated. In the current spec, the following properties cannot be manipulated with keyframes or transitions:

在开始尝试使用CSS移动元素之前，了解哪些内容不能动画化很有用。 在当前规范中，以下属性无法通过关键帧或过渡进行操作：

• scrolling of the entire body; that is the realm of JavaScript

  全身滚动； 那就是JavaScript的境界

• gradients (Gradient animation is part of the specification, but not supported in any browser yet, with the surprising exception of IE10+)

  渐变 (渐变动画是规范的一部分，但除IE10 +之外，任何浏览器均不支持渐变动画)

• almost anything to do with the background property, including background-image, although background-position can be animated.

  尽管background-position可以设置动画，但几乎与background属性有关，包括background-image 。

• you cannot animate the height of an element from an auto-computed, natural height (e.g. an element filled with text), although is is possible to animate its min-height

  你不能动画height从自动计算，自然高度的元件(例如填充有文本的元素)，尽管是能够动画其min-height

While there are usually ways around these limitations, including animating SVG gradients – it’s good to know what CSS can’t do before you waste a lot of time and energy.

尽管通常可以通过多种方法来解决这些限制，包括为SVG渐变设置动画 ，但最好还是在浪费大量时间和精力之前知道CSS无法完成的工作。

资源资源 (Resources)

• A list of what the CSS spec currently can animate.

  CSS规范当前可以制作动画的列表 。

• Can I Animate, a searchable index of animatable properties.

  我可以制作动画吗 ，可搜索的动画属性索引。

翻译自: https://thenewcode.com/497/The-Limits-Of-CSS-Animation