Question

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

我最终想要的是让球在完成后继续旋转。我知道我可以通过提供多个课程来做到这一点。但我想避免这种情况，以防止乱七八糟的课程。

（小提琴可能不适用于Chrome以外的其他浏览器，我只是快速将其一起攻击）

的小提琴示例

这是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: horizontal 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查看我的多个动画样本，我已经在很多平台上进行了测试。

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

1 个答案: