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动画越来越拖曳直到悬停

回答

相关问题