html - css3 多个具有不同持续时间的动画

Question

是否可以使用 CSS3 动画为元素提供多个具有不同持续时间的动画？

我最终想要的是在完成后有球保持旋转。我知道我可以通过开设多个类(class)来做到这一点。但我想避免这种情况，以防止类(class)数量过多。

(Fiddle 可能无法在 Chrome 以外的其他浏览器上运行，我只是快速地将其破解)

我目前拥有的 Fiddle 示例 http://jsfiddle.net/cchsh6om/2/

这是 CSS

div {
    margin: 20px;
    width: 100px;
    height: 100px;
    border-radius: 46px;
    position: relative;
    background: #ddd;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-name: spin;
    -moz-animation-duration: 1000ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-out;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: ease-out;

    animation-name: spin;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
span{
    position: absolute;
    line-height: 100px;
    left:48%;
}
@-ms-keyframes spin {
    from {
        opacity: 0;
        margin-left: 200px;  
        -ms-transform: rotate(0deg); }
    to {
        opacity: 1;
        margin-left: 20px;  
        -ms-transform: rotate(-360deg); }
}
@-moz-keyframes spin {
    from { 
        opacity: 0;
        margin-left: 200px; 
        -moz-transform: rotate(0deg);
    }
    to {
        opacity: 1;
        margin-left: 20px;  -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes spin {
    from {
        opacity: 0;
        margin-left: 200px; 
        -webkit-transform: rotate(0deg); }
    to {
        opacity: 1;
        margin-left: 20px; 
        -webkit-transform: rotate(-360deg); }
}
@keyframes spin {
    from {
        opacity: 0;
        margin-left: 200px;
        transform:rotate(0deg);
    }
    to {
        opacity: 1;
        margin-left: 20px; 
        transform:rotate(-360deg);
    }
}

和 HTML

<div><span>=</span></div>

Answer 1

是的，有可能，但您的语法有误。首先，使用像 animation: horizo​​ntal linear 8s infinite 这样的简短符号(有关更多信息，请阅读 acticle)。然后你可以在同一个元素上应用多个用逗号分隔的动画:

animation:  horizontal linear 8s infinite,
              vertical ease-in-out 1.3s infinite alternate,
              blink linear .7s infinite alternate,
              rotation linear .4s infinite;

并为它们中的每一个定义关键帧:

@keyframes horizontal {
   from {left: 0;}
   to {left: 100%;} 
}
@keyframes vertical {
   from {top: 0;}
   to {top: 200px;} 
}

最后，您可以省略 -moz 和 -ms 前缀。 -webkit-animation 和 animation 适用于所有现代浏览器，包括移动设备。

在 CodePen 查看我的多个动画示例，我已经在许多平台上对其进行了测试。