Html CSS3动画在悬停前停止

我正在做一个CSS3动画，在我的网站上闪烁一个img

我的点它只是页面中的一个黑点，我希望它的不透明度从1到0并向后闪烁

其次是： -加载页面->动画开始运行 -将鼠标悬停在.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：

---

多亏了@Nikki，我才能找到一个解决方案

使用JS，我可以在DOM完全加载时调用这个函数，这样我就可以强制css启动

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

---

你能发布一个JSFIDLE吗？@Nikki添加了JSFIDLE，它还不能正常工作，我想我忘了导入一些东西了！这对我来说似乎很好。。。你用的是什么浏览器？现在，小提琴可以正常工作了：如果你愿意，你可以试试这个，据我所知，每次你加载页面时它都能正常工作