CSS转换和CSS动画的用例_Css_Css Transitions_Css Animations

CSS转换和CSS动画的用例

css

CSS转换和CSS动画的用例,css,css-transitions,css-animations,Css,Css Transitions,Css Animations,据我所知，没有这样的东西我们可以实现使用css转换，但我们不能实现使用css动画，但反之亦然也就是说，任何转换都有一个css动画等价物。比如说这个, .ablock:hover { position: relative; -moz-transition-property: background-

据我所知，没有这样的东西我们可以实现使用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关键帧、@-webkit关键帧等复制粘贴大量代码

对于javascript的控制，灵活性和复杂性动画是更合适的工具（至少乍一看是这样）。那么，什么是用例

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

这是罗曼·科马罗夫的作品。比方说，我们有一个div和子div。当父div悬停时，我们正在转换子元素。一旦我们拿走鼠标，转换就会被取消。取消的持续时间正是我们已经花在过渡上的时间。动画“立即”取消。然而，我不知道这两种行为有多标准

动画可以循环（当然也可以有关键帧）
转换可以更加灵活，您可以轻松地在不同的环境中转换到不同的值

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

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

left

top