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 - 在徘徊時播放動畫，但不是戛然而止

回答

相關問題