CSS - 在徘徊时播放动画，但不是戛然而止

我正在尝试创建一种加载动画，其中3个条形低于eachother，都有单独的关键帧。CSS - 在徘徊时播放动画，但不是戛然而止

3个横杠是div元素，位于父母div内。

<div id="menu"> 
    <div id="menubox1"></div> 
    <div id="menubox2"></div> 
    <div id="menubox3"></div> 
</div>

将动画属性分配给个人menubox ID。

#menubox1:after { 
    content: ''; 
    position: absolute; 
    bottom: 0px; 
    transform: translateY(-50%); 
    border-top: 1px solid #FFDADA; 

    animation: menukeyframes1; 
    animation-duration: 2000ms; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; 
    animation-play-state: inherit; 
} 

@keyframes menukeyframes1 { 
    0% { width: 100%; left:0;} 
    ... 
}

我的目标是播放动画当光标悬停在父DIV。

我的尝试是玩弄其设置为running或paused，这取决于如果父div是徘徊animation-play-state。

问题在于动画是在动画完成之前暂时停顿了，如果它停止中间动作，看起来有点不好。

有没有很好的解决这个问题，最好没有JavaScript/jQuery，并且跨所有浏览器？

来源

2017-06-01 dwycxt

我不这么认为。我假设这是你不想要的突然结局？ https://codepen.io/mcoker/pen/vZBXgY听起来就像你想在浏览器中使用'animationend'事件触发'paused'，这需要js。 –

@MichaelCoker这正是我现在所拥有的。用js实现我的目标最简单，最干净的方法是什么？ – dwycxt

http://jsfiddle.net/sSYYE/55/。这是从这个答案稍微更新的版本https://stackoverflow.com/questions/7694323/css3-animation-on-hover-force-entire-animation#comment-56413462。 – WizardCoder

正如你看到它不能只用CSS来实现，在这一刻，和良好的jQuery的答案已经提到，这是值得一提的是它可以在vanillaJS的几行来解决：

var dur = 2000; 
document.querySelectorAll('.smooth').forEach(el=>{ 
    var t; 
    el.addEventListener('mouseover',_=>{t = performance.now();el.style.animationPlayState = 'running'}) 
    el.addEventListener('mouseout',_=>window.setTimeout(()=>el.style.animationPlayState = 'paused',dur-(performance.now()-t)%dur)); 
})

working pen

非ES6：BABEL

来源

2017-06-01 15:05:43

你的代码有什么特别之处吗？它引发了一些错误，例如=>箭头需要esversion 6或'_未定义'。 – dwycxt

这是es6，如果你不能使用它，即使在线也很容易：[BABEL]（https://babeljs.io/repl/） –

加1使用香草js。非常花哨。 – WizardCoder

可以使用转换始终淡出动画的div。类似这样的东西可能适合你：

#menubox1 { 
    opacity: 0; 
    transition: opacity .5s linear; 
} 

#menu:hover { 
    #menubox1 { 
    opacity: 1; 
    transition: opacity .5s linear; 
    } 
}

来源

2017-06-02 07:29:13

CSS - 在徘徊时播放动画，但不是戛然而止

回答

相关问题