5

据我了解，没有这样的事情我们可以使用 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 悬停时，我们正在转换子元素。一旦我们拿走鼠标，过渡就会被取消。取消的持续时间正是我们已经花费在过渡上的时间。动画“立即”取消。不过，我不知道这两种行为有多标准。
4

2 回答 2

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

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

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

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

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;
    }
}

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

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

于 2014-02-18T14:49:34.727 回答