哪些 CSS 属性无法用于动画效果？

虽然许多 CSS 属性支持过渡（transition）或动画（animation）效果，但并不所有属性都能被动画，主要原因包括属性的离散性（如状态切换而非渐进变化）或内部机制（如不支持中间值过渡）。常见不支持动画效果的 CSS 属性可以分为两类：非动画属性和可能影响性能或兼容性的属性。基于权威来源，以下是常见的非动画属性类别和相关例子，附带注意事项：

1. 非数值型离散属性（Discrete State Properties）:
   • 这些属性基于状态改变而非可计算数值，因此没有中间动画过程。
     • display: 切换 none 和 block（或 inline、 flex 等）时无动画（例如隐藏元素瞬间消失）。
     • visibility: 在 hidden 和 visible 之间变化，无淡入淡出过程。
     • content: 用在 ::before 或 ::after 伪元素，更改文本内容时无动态效果（如即时切换“Text 1”到“Text 2”）。

   在标准环境中，对这些属性应用 transition 或 animation 将被忽略。

2. 特定值切换或部分过滤器属性:
   • 即使属性数值化，某些值的突变也导致动画失效（无平滑过渡）。如：
     • background-image: 替换或更改进图片资源（url("image1") 到 url("image2")），只瞬间替换无中间动画。
     • cursor: 改变鼠标光标的样式（如从 pointer 到 text），瞬间更新无动态。
     • filter 函数的特定变化:

       /* 从 'none' 切换到数字值时无过渡；例如 'blur ( 0px )' 到 'blur ( 5px )' 需支持数值变化 */
       filter: blur ( 5px ); 
       

       对于类似 blur(), brightness()，若起始值设置非数值状态（如 none） 到数值值，则不触发动画效果。

     • 其他属性:
       • pointer-events: 例如从 none 到 auto 状态改变立刻发生。
       • scroll-snap: 涉及滚动停止点变更的动画（浏览器可能部分延迟而非平稳变化）。

此外，考虑其他影响因素以防止误解：

• 技术限制和性能问题:
  • 虽然严格说支持动画，但诸如 box-model（像 width, height 和 margin）在动画可能引发重排，尤其在低性能设备或旧浏览器（如旧版 IE）效果差或被忽略（详见）。
  • left 属性使用替代方案：

    /* 使用 transform 取代 left 实现平滑动画 */
    .element {
      transform: translateX ( 100px ); /* 有效 */
    }
    

• 环境和设置影响动画展示性（但不是属性本身问题）:
  • 在开发中检测如 prefers-reduced-motion（用户 OS 设置为减小动画）可能使得所有动画效果失效。
  • 在浏览器中，IE9 下及早期版本不支持基本动画机制（transition, animation 都不被识别）。

综上回答优先引用可靠信息如非动画属性定义；实际开发可使用 CSS Tricks transform, 并验证浏览器支持以保证平滑效果。