使用css步骤的问题

Question

我正在尝试一个5步动画，其中的步骤应该是：

1. top：0rem;
2. top：-2rem;
3. top：-4rem;
4. top：-6rem;
5. 顶部：-8rem;

但我不能这样做。我尝试过的所有内容最终都会出现“顶级”值。

你可以在那里看到这个：http://jsfiddle.net/ax6hugvd/

.marQuee.T5 > DIV {
    animation: marquee_t5 25s steps(5, end) infinite;
}

@keyframes marquee_t5 {
    to {
        top: -8rem;
    }
}

样品从1步到5步。

Answer 1

我明白了。

https://jsfiddle.net/f4autmf7/

你必须取结束值，乘以（[步数] + 1）然后除以[步数]。

@keyframes marquee_t2 {
    100% {
        top: calc(-2rem * 3 / 2)
    }
}

@keyframes marquee_t3 {
    to {
        top: calc(-4rem * 4 / 3);
    }
}

@keyframes marquee_t4 {
    to {
        top: calc(-6rem * 5 / 4);
    }
}

@keyframes marquee_t5 {
    to {
        top: calc(-8rem * 6 / 5);
    }
}

@-webkit-keyframes marquee_t2 {
    100% {
        top: calc(-2rem * 3 / 2);
    }
}

@-webkit-keyframes marquee_t3 {
    to {
        top: calc(-4rem * 4 / 3);
    }
}

@-webkit-keyframes marquee_t4 {
    to {
        top: calc(-6rem * 5 / 4);
    }
}

@-webkit-keyframes marquee_t5 {
    to {
        top: calc(-8rem * 6 / 5);
    }
}