前端动画实现方式

1. CSS3 过渡：通过定义 CSS 属性的变化来实现动画效果。例如，可以通过在元素上定义 transition 属性和使用 :hover等伪类来触发过渡。这种方式的优点是简单易用，性能较好，缺点是只能实现比较简单的动画效果，难以控制细节。
   transition属性可以让元素的变化过程变得更加平滑，使用transition可以让元素的变化过程更加平滑，但是不能实现复杂的动画效果。使用方式如下：

   .element {
     transition: <property> <duration> <timing-function> <delay>;
   }
   

   • <property>：指定需要过渡的CSS属性名，比如background-color、width等。

   • <duration>：指定过渡的时间，单位是秒(s)或毫秒(ms)。

   • <timing-function>：指定过渡的时间曲线，常用的取值有ease(默认值)、linear、ease-in、ease-out、ease-in-out。

   • <delay>：指定过渡的延迟时间，单位是秒(s)或毫秒(ms)。

2. CSS3 动画：与过渡类似，通过定义 CSS属性的变化来实现动画效果，但是与过渡不同的是，动画可以使用关键帧（keyframe）来控制元素的中间状态。这种方式的优点是相对灵活，可以实现较为复杂的动画效果，缺点是需要编写复杂的CSS 代码，调试困难。