多个CSS转换

Question

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

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

这是我的动画代码：

.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/

我做错了什么？

Answer 1

您混合了特定于浏览器的前缀和没有特定于浏览器前缀，还需要指定多个动画，您只需要用commma将它们分隔开。在您的示例中，秋季动画将被摆动动画覆盖。

类似这样的东西：

.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)}
}

检查此小提琴