gpt4 book ai didi

CSS 过渡向后/反向

转载 作者:行者123 更新时间:2023-11-28 13:23:27 26 4
gpt4 key购买 nike

我想知道是否有任何方法可以使用相同的 CSS 过渡实例来将其向前移动然后向后/向后移动。例如,假设我有这种转变:

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

还有两个用于此过渡的运行者。一个淡入,另一个淡出:

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

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

我想要完成的是使用相同的过渡来进行淡入和淡出,但我这样做的方式不起作用。

Here is the example on JSBin .

最佳答案

使用百分比代替fromto

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

你可以重复你想要的次数或者只是将它设置为无限

关于CSS 过渡向后/反向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14821343/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com