CSS过渡倒退/反转 [英] CSS transition going backwards/reverse

问题描述

我不知道是否有任何方式使用相同的CSS过渡实例同时移动它向前，然后向后/反转。例如，可以说我有这个过渡：

I'm wondering if is there any way to use the same CSS transition instance to both move it forward and then backwards/reverse. For example, lets say I have this transition:

@-webkit-keyframes fade-transition {
    from { opacity: 0; }
    to { opacity: 1; }
}

和两名选手的这种转变。一个人做了淡入，另一种则淡出：

And two runners for this transition. One does the fade in and the other does the fade out:

.fade-in {
    -webkit-animation: fade-transition .2s linear backwards;
}

.fade-out {
    -webkit-animation: fade-transition .2s linear forwards;
}

我要完成的任务是使用相同的过渡做到既淡入和淡出，但我在做它不工作的方式。

What I want to accomplish is to use the same transition to do both the fade in and the fade out but the way I'm doing it doesn't work.

这里是JSBin 的例子。

推荐答案

使用百分比而不是从和到

@-webkit-keyframes fade-transition {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

您可以遍历这个号码你想要的时间或只是将其设置为无限

You can iterate this number of times you want or just set it to infinite

这篇关于CSS过渡倒退/反转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！