Question

我正在做一个CSS3动画来＃34;闪烁＆＃34;我的网站上有一个img。

我的.dot只是页面上的一个黑点，我希望它闪烁（不透明度从1到0和向后）

保证是这样的： - 加载页面 - ＆gt;动画开始运行 - 将.dot悬停在 - ＆gt;动画暂停 - 将鼠标悬停 - ＆gt;动画再次开始运行

它有效...但有时当我加载我的网络时，它们处于暂停模式。当我将它们悬停时，它们会激活并开始运行。我正在使用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";
    }
}

CSS3动画卡住直到悬停

1 个答案: