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

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

@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;
}

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