gpt4 book ai didi

html - CSS(点击)动画不会在 Firefox 中播放多次

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

我已经在 Chrome 和 Safari 中尝试过,每次按下打开链接时动画都会运行,但在 Firefox 中,动画只会在我第一次按下链接时运行。之后,当我按下链接时,它不会加载动画。有什么办法可以让动画在我每次按下链接时都运行吗?

这是我正在使用的:

http://jsfiddle.net/p5hkyovs/4/

<div id="over">
<div class="animation">Fade in - <a href="#start">Back</a></div>
</div>
<div id="start">
<a href="#over">Open</a>
</div>

CSS

#over {
display: none;
}
#over:target {
display: inline-block
}
#over:target ~ #start {
display: none;
}
div.animation {
-webkit-animation:fadeIn .5s ease-in-out;
-moz-animation:fadeIn .5s ease-in-out;
animation:fadeIn .5s ease-in-out;
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

最佳答案

我认为问题是 animation-name: fadeIn; 值缺少 mozilla 供应商前缀。

试试这个 JSFIDDLE

关于html - CSS(点击)动画不会在 Firefox 中播放多次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27293340/

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