CSS 过渡和 CSS 动画的用例

Question

据我了解，我们无法使用CSS过渡来实现这样的事情，但我们不能使用CSS动画来实现，但反之亦然。

也就是说，任何过渡都有一个 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 的控制，灵活性和复杂性动画是更合适的工具（至少乍一看是这样）。那么，什么是用例？

UPD： 好的，让我尝试列出问题中发现的有趣信息。

• 这是由罗曼·科马罗夫 (Roman Komarov) 贡献的。假设我们有一个 div 和子 div。当父 div 悬停时，我们正在转换子元素。一旦我们拿走鼠标，过渡就会被取消。此次取消的持续时间正是我们已经花费在转换上的时间。动画“立即”取消。不过，我不知道这两种行为有多标准。

Answer 1

• 动画可以循环（并且可以有关键帧，是的）。
• 转换可以更加灵活，您可以在不同的情况下轻松转换到不同的值。

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

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

Answer 2

通过转换，您可以在要转换的已定义属性的任何值之间进行转换。例如，您希望在链接悬停且处于活动状态时转换链接的颜色：

a {
    color: #000;
    transition: color .4s ease;
}
a:hover {
    color: #888;
}
a:active {
    color: #faa;
}

您可以独立选择哪种颜色。
现在，如果您想使用动画样式，则必须显式设置动画状态的颜色值。而且您无法轻松地在三种状态之间设置动画：正常、悬停和活动。您需要更复杂的定义。我将尝试使用动画：

a {
    color: #000;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: toDefault;
}
a:hover {
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: toHover;
}
a:active {
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-name: toActive;
}
@keyframes toDefault {
    to {
        color: #000;
    }
}
@keyframes toHover {
    to {
        color: #888;
    }
}
@keyframes toActive {
    to {
        color: #faa;
    }
}

现在这不包括回到之前状态的动画。我不确定你是否能拿到它。

简而言之：通过过渡，您可以为一组未定义的属性和值设置动画，而关键帧动画则用于定义明确的动画和/或过渡。