css - CSS 过渡和 CSS 动画的用例

Question

据我了解，我们无法使用 css transitions 实现，但我们不能使用 css animations 实现，反之亦然。

也就是说，任何过渡都有一个等效的 css 动画。 比如这个

.ablock:hover {                                                   
  position: relative;                                             
  -moz-transition-property: background-color, color;              
  -moz-transition-duration: 1s;                                   
  -webkit-transition-property: background-color, color;           
  -webkit-transition-duration: 1s;                                                             
  color: red;                                                     
  background-color:pink;                                          
}

相当于以下内容:

.ablock:hover {
    -moz-animation-duration:1s;                                   
    -moz-animation-name:transition;                               
    -webkit-animation-duration:1s;                                
    -webkit-animation-name:transition;                            
}       

@-moz-keyframes transition {                                      
    to {                                                          
        color: red;                                               
        background-color: pink;                                   
    }
}       

@-webkit-keyframes transition {                                   
    to {                                                          
        color: red;                                               
        background-color: pink;                                   
    }
}

我的问题是 - 如果我们谈论同时支持 css 转换和动画的浏览器，那么选择一种或另一种方法的用例是什么？ 至于过渡，我只能说出一个——它们有更简洁的语法，我们不必为@-moz-keyframes、@-webkit-keyframes 等复制粘贴大量代码。

对于来自 javascript 的控制，灵 active 和复杂性动画是更合适的工具(至少，乍一看)。那么，什么是用例？

更新: 好的，让我试着列出在问题中发现的有趣信息。

• 本文由 Roman Komarov 贡献。比如说，我们有一个 div 和子 div。当父 div 悬停时，我们正在转换子元素。一旦我们拿走鼠标，转换就会被取消。这次取消的持续时间正是我们已经花在过渡上的时间。动画“立即”取消。不过，我不知道这两种行为的标准如何。

Answer 1

• 动画可以循环播放(而且可以有关键帧，是的)。
• 转换可以更加灵活，您可以轻松地转换到不同的值和不同的情况。

虽然您可以通过动画模拟一些过渡(就像您在帖子中提到的那样)，但过渡更强大:

• 您只需告诉您必须为哪些属性设置动画以及在哪些条件下(使用不同的选择器)
• 您可以通过不同的方式触发转换:
  1. 更改伪类 CSS 中的属性:hover、:active 等(创建纯 CSS UI)
  2. 为不同的目的改变不同类的属性。
  3. 改变内联样式的属性:结合 JS，它比动画更强大。