CSS3動畫越來越拖曳直到懸停

我正在做一個CSS3動畫來「眨眼」我的網站上的img。CSS3動畫越來越拖曳直到懸停

我.DOT它只是一個黑點在頁，我希望它閃爍（不透明度從1到0和向後）

的secuence會是這樣： - 加載頁面 - >動畫啓動運行 - 懸停.dot - >動畫暫停 - 懸停 - >動畫開始再次運行

它的工作原理...但有時當我加載我的網頁時，它們處於暫停模式。當我徘徊他們時，他們激活並開始跑步。我正在使用chrome。

一些想法？

我的代碼：

.dot { 
position: absolute; 
width: 22px; 
height: 22px; 
background-color: black; 
border: 4px solid white; 
border-radius: 99999px; 
cursor: pointer; 
-moz-animation-name: example; 
-o-animation-name: example; 
-webkit-animation-name: example; 
animation-name: example; 
-moz-animation-duration: 2s; 
-o-animation-duration: 2s; 
-webkit-animation-duration: 2s; 
animation-duration: 2s; 
-moz-animation-iteration-count: infinite; 
-o-animation-iteration-count: infinite; 
-webkit-animation-iteration-count: infinite; 
animation-iteration-count: infinite; 
} 
.dot:hover { 
    background-color: white; 
    border: 4px solid black; 
    opacity: 1; 
    -webkit-animation: animation 1s 16 ease; 
    -webkit-animation-play-state: paused; 
    -moz-animation: animation 1s 16 ease; 
    -o-animation: animation 1s 16 ease; 
    animation: animation 1s 16 ease; 
    -moz-animation-play-state: paused; 
    -o-animation-play-state: paused; 
    animation-play-state: paused; 
} 


/* The animation code */ 
@-moz-keyframes example { 
    from {opacity: 1;} 
    to {opacity: 0;} 
} 

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

@keyframes example { 
    from {opacity: 1;} 
    to {opacity: 0;} 
}

的jsfiddle： https://jsfiddle.net/nachogarrone/33j2Lzq6/3/

來源

2015-03-31 Nacho

你可以發佈jsfiddle嗎？ – Nikki 2015-03-31 23:57:55

@Nikki增加了jsfiddle，它不能正常工作，我假設我忘了導入一些東西！ – Nacho 2015-04-01 00:15:18

它似乎對我來說工作正常......您使用的是什麼瀏覽器？ – 2015-04-01 00:20:57

由於@Nikki我能得到一個解決辦法。

隨着JS，我可以調用這個函數，當DOM完全加載，這種方式我強迫CSS啓動。

var listdot = document.getElementByClassName("dot"); 
function Start() { 
    for (var i = 0; i < listdot.length; i++) { 
     listdot[i].style.WebkitAnimation = "example"; 
    } 
}

來源

2015-04-03 14:24:57 Nacho

CSS3動畫越來越拖曳直到懸停

回答

相關問題