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

动画可以循环播放（并且可以有关键帧，yeeah）。
过渡可以更灵活，您可以轻松地转换为不同的值和不同的情况。

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

您只需告诉您必须设置哪些属性以及在哪些条件下（使用不同的选择器）
您可以通过不同方式触发转换：
1. 更改CSS中伪属性的属性：hover，：active等（创建纯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;
    }
}

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

简而言之：使用过渡，您可以为未定义的属性和值集制作动画，而关键帧动画则用于定义明确的动画和/或过渡。

CSS转换和CSS动画的用例

2 个答案: