多个 CSS 过渡答案

【问题标题】：Multiple CSS transitions多个 CSS 过渡
【发布时间】：2015-07-02 11:24:28
【问题描述】：

我在让两个转换一起工作时遇到问题。

第二个动画（部分）有效，但摆动效果似乎在一段时间后重置并停止重复，第一个动画根本不起作用。

这是我的动画代码：

.box{
    width:250px; height:50px;
    background:blue;
    border: 1px solid black;
    position:fixed;
    left: 50%;
    margin-left:-125px;
    top:0px;

    animation-name: fall;
    animation-duration: 1.5s;
    animation-timing-function: ease-in;

    animation-name: swing;
    animation-duration: 4s;
    animation-iteration-count:infinte;
    animation-timing-function: ease-in-out;
    animation-delay: 1.4s;
}
@-moz-keyframes fall{
   from {top: -50px;}   
    to {top: 0px;}
}
@-webkit-keyframes fall{
   from {top: -50px;}   
    to {top: 0px;}
}
@-moz-keyframes swing{
    -moz-transform-origin: center top;
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(-2deg)}
    100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
    -webkit-transform-origin:center top;
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(-2deg)}
    100%{-webkit-transform:rotate(-3deg)}
}

可以在此处找到显示问题的演示：http://jsfiddle.net/akwbmw86/

我在这里做错了什么？

【问题讨论】：

标签： css animation css-transitions

【解决方案1】：

您将浏览器特定的前缀与没有浏览器特定的前缀混合在一起，还要指定多个动画，您只需用逗号分隔它们即可。在您的示例中，下降动画被摆动动画覆盖。

类似这样的：

.box{
    width:250px; height:50px;
    background:blue;
    border: 1px solid black;
    position:fixed;
    left: 50%;
    margin-left:-125px;
    top:150px;

    animation: fall 1.5s ease-in, swing 4s  ease-in-out;
    -webkit-animation: fall 1.5s ease-in, swing 4s  ease-in-out;
    -moz-animation: fall 1.5s ease-in, swing 4s  ease-in-out;
}

@-moz-keyframes fall{
   0% {top: -50px;} 
   100% {top: 150px;}
}
@-webkit-keyframes fall{
   0% {top: -50px;} 
   100% {top: 150px;}
}
@-moz-keyframes swing{
    -moz-transform-origin: center top;
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(-2deg)}
    100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
    -webkit-transform-origin:center top;
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(-2deg)}
    100%{-webkit-transform:rotate(-3deg)}
}

查看this fiddle

【讨论】：

这使得任何与悬停相关的动画 - 不再起作用。请参阅此处：jsfiddle.net/hjgLbry0 那么基于触发器的转换如何与这种格式样式一起使用？
@Dave 你在哪里看到悬停？当我打开我的小提琴时，块掉下来了。对不起，我不确定你到底在问什么。当您将鼠标悬停在方块上时，您希望方块掉落吗？
我添加了一个悬停过渡来看看它是如何工作的，但是一旦你有两个或更多关键帧，悬停似乎就不起作用了。我不知道使用您使用的语法将其应用于鼠标悬停的语法。我也不知道为什么，但我不能在 cmets 中@你的用户名。