我这段 CSS3 Animation 代码为什么不能加载两段？

[jmyz0455]

我想实现一个动画效果，分两段完成。前半部分是先快后慢进入画面，后一半是匀速离开画面。先执行前者，结束后再执行后者，两段都结束后会不断重复这一过程。代码大概是这样的：

@keyframes over {
    from {
        left: -100px;
    }
    to {
        left: calc(50% - 50px);
    }
}
@keyframes down {
    from {
        left: calc(50% - 50px);
    }
    to {
        left: calc(100% + 100px);
    }
}
.move {
    position: absolute;
    animation: over 1s ease-in-out infinite, down 1s linear infinite;
}

我发现总是只能执行后半部分的动画，搜索到的答案都是加个 "," 分割即可，请问我这段代码有什么问题呢？

[yangg]

元素：你要我怎样？

[yangg]

应该用 animation delay?

[learnshare]

0 50% 100%，一个动画写两个过程不就好了

[jmyz0455]

@learnshare 因为前后两部分的动画，如果能分开的话，别的样式也能分别使用这两个动画，提高复用度。
而且别人说可以，我就想看能不能使用。

[learnshare]

@jmyz0455 多写几行 CSS 没什么，如果介意，应该用 LESS/SASS 之类的提高编码效率

[jmyz0455]

好吧，虽然我的关注点是别人可以我这边不行。

[ljcarsenal]

加 delay 吧

[kokdemo]

@jmyz0455 呃，第一次听说动画复用的……