Vant4组件库内置动态样式覆盖方法详解
Vant4是一个基于Vue3.0的移动端组件库，它提供了一些内置的动态样式来实现元素的变形和动画效果。但有时候我们可能想要自定义或覆盖这些样式，那么我们应该怎么做呢？本文将通过一个实例来详细介绍如何覆盖Vant4组件库内置动态样式。
Vant4组件库内置了一些动态样式，它们是用CSS动画实现的。CSS动画可以让元素从一个样式逐渐变化到另一个样式，并且可以控制动画的持续时间、重复次数、速度曲线等。
以上来自于官方文档Style 内置样式 - Vant 4 (vant-ui.github.io)
如果我们想要覆盖内置动态样式，我们需要在style标签里不加scoped属性，并且用组件的类名来修改。这是因为scoped属性会限制CSS作用域，在编译时会给每个元素添加唯一标识符。而组件的类名则可以直接定位到需要修改的元素。
错误写法
正确写法
在浏览器控制台用F8debuger之后，发现其内置的样式跟Vue文档的动态效果语法有些出入
然后我问了newbing，知晓了transform和animation的区别
transform和animation都是CSS3中的属性，它们都可以实现元素的变形和动画效果。但是它们有一些区别：
transform只能描述元素的静态样式，比如旋转、缩放、移动等，而animation可以描述元素的动态样式，比如持续时间、重复次数、关键帧等。
transform需要配合transition（过渡）来实现动画效果，而animation不需要。
transform可以用translate来指定元素的移动距离，而animation需要用@keyframes来定义元素的移动路径。
所以你改成了animation:是因为你想用CSS动画来覆盖内置样式，而不是用transform:。animation:是一个简写属性，它包含了以下几个子属性：
animation-name：指定要应用到元素的一个或多个关键帧名称。
animation-duration：指定完成一个周期所花费的时间。
animation-timing-function：指定动画速度曲线。
animation-delay：指定在动画开始之前等待的时间。
animation-iteration-count：指定动画播放次数。
animation-direction：指定是否轮流反向播放动画。
animation-fill-mode：指定在播放之前或之后，其动画效果是否可见。
animation-play-state：指定动画是否正在运行或暂停。
你可以参考这个例子来理解animation:的用法。希望这能帮助你更好地理解transform和animation的区别。
