我使用基于此代码的关键帧动画整理了一个纯css文本幻灯片:https://codepen.io/johnlouie04/pen/BqyGb
我已经做到这一点,当你悬停过渡时,它会暂停.这在谷歌浏览器和Safari中完美运行,但是在Firefox上悬停滑块时,动画会在暂停前快速重放.即使没有animation-play-state:paused线也会发生这种情况.
滑块中还有另一个悬停选择器,它似乎也会导致动画重放.但是我删除哪一个并不重要,只要滑块内任何类型的悬停选择器(即使它与动画无关),Firefox会发生奇怪的事情.
我已经google了很长时间,找不到任何有同样问题的人.有谁知道如何解决这个问题？我会非常感激一些帮助.
这是代码:
<html>
<body>
<style>
#slider {
overflow: hidden;
position: relative;
width: 920px;
z-index: 0;
margin: 0 auto;
padding: 0;
}
#slider li {
float: left;
position: relative;
display: inline-block;
margin: 0px;
}
#slider-margin {
margin: 50px 0px;
padding: 0px;
border-radius: 8px;
border-bottom: 3px solid rgba(0,10,30,0.1);
position: relative;
background: rgba(0,10,30,0.2);
}
#slider li {
float: left;
position: relative;
display: inline-block;
margin: 0px;
}
#slider ul {
list-style: none;
position: relative;
left: 0px; …