AnimeJS支持的合法CSS动画属性有哪些？border属性动画失效如何处理

问题原因 #

AnimeJS 无法直接对 border 这类复合CSS属性做动画，border 本质是 border-width、border-style、border-color 三个属性的缩写，其中 border-style 是枚举值，没有办法做数值插值过渡，直接写在动画配置里自然不会生效。

你已经在初始CSS里固定了 border-style: solid，只需要把动画配置拆成对应子属性即可：

anime({
  targets: '.data-hierarchy-main-container',
  duration: 1000,
  easing: 'linear',
  borderWidth: '3px',
  borderColor: '#332709'
});

AnimeJS支持的CSS动画属性范围 #

• 所有值为单一数值、百分比、颜色的CSS属性都可以直接做动画，常见的包括宽高、内外边距、圆角、透明度、各类transform属性、边框宽度、字体大小、颜色/背景色等
• 复合属性如果所有子属性都是可插值的数值/颜色类型也支持，但更推荐直接拆分写子属性，避免踩坑
• 纯枚举值、字符串类型的CSS属性不支持动画，比如display、border-style、font-family、text-align等

AnimeJS官方文档的属性支持章节有完整的可动画属性列表以及类型说明，你可以自行查找参考。

内容的提问来源于stack exchange，提问作者Pratik Chauhan