html - CSS3 动画卡住直到悬停

Question

我正在制作一个 CSS3 动画来“闪烁”我网站上的 img。

我的 .dot 只是页面中的一个黑点，我希望它闪烁(不透明度从 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: https://jsfiddle.net/nachogarrone/33j2Lzq6/3/

Answer 1

感谢@Nikki，我可以找到一个解决方案。

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

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