CSS中动画和过渡的区别

CSS过渡允许您平滑地更改属性值，但它们总是需要像悬停一样触发。属性更改不会立即生效。在一段时间内，属性会发生变化。例如，如果您将元素的颜色从白色更改为黑色，更改会立即发生。 CSS 更改按照可以自定义的加速度曲线以时间间隔发生。

在两个状态之间转换的动画称为隐式转换，因为开始状态和最终状态之间的状态是由浏览器隐式定义的。

图 1：从 A 点开始到 B 点结束的过渡，没有中间点。

CSS动画允许 HTML 元素的动画，不像过渡只执行 A 点到 B 点的操作，但也可以在两者之间进行更多的操作。动画包括两个步骤，样式表中定义的 CSS 动画和一组指示动画开始和结束状态的关键帧。

图 2：动画从 A 点开始，在 B 点结束，中间有其他点。

过渡和动画的区别：

Transition	Animations
Transitions cannot loop (You can make them do that but they are not designed for that).	Animations have no problem in looping.
Transitions need a trigger to run like mouse hover.	The animation just start. They don’t need any kind of external trigger source.
Transitions are easy to work in JavaScript.	The animations are hard to work in JavaScript. The syntax for manipulating a keyframe and assigning a new value to it, is very complex.
Transitions animate a object from one point to another.	Animation allows you to define Keyframes which varies from one state to another with various properties and time frame.
Use transition for manipulating the value using JavaScript.	Flexibility is provided by having multiple keyframes and easy loop.

示例1：下面的示例演示了应用悬停后更改颜色的过渡效果。

HTML

  

    

  

    
The transition Property
  
    

        Hover over the div element below, 
        to see the transition effect:
    
    


  

输出：

示例 2：以下示例演示使用动画更改颜色。

HTML

  

    

  

    
Animation
    


  

输出：

使用动画改变颜色