css - 悬停动画

Question

某些 CSS3 动画有一个小问题。

在标题下方运行的主导航中，标题以关于开始，以联系方式和下载结束。当我将鼠标悬停在 li 上时，动画再次播放。这不是我想要发生的。我想在页面加载时开始播放 - 就是这样。

这是链接:http://wilkins.epixdev1.co.uk/

这是 CSS 代码:

-webkit-animation-name: slideDown;
-webkit-animation-iteration-count: once;
-webkit-animation-fill-mode: forwards;
-webkit-animation-duration: 2s;   
-webkit-animation-delay: 3s;
-moz-animation-name: slideDown;
-moz-animation-iteration-count: once;
-moz-animation-fill-mode: forwards;
-moz-animation-duration: 2s;   
-moz-animation-delay: 3s;
animation-name: slideDown;
animation-iteration-count: once;
animation-fill-mode: forwards;
animation-duration: 2s;
animation-delay: 3s;

关键帧如下:

@-webkit-keyframes slideDown {0% {top: -59px;} 100% {top: 0px;}}
@-moz-keyframes slideDown {0% {top: -59px;} 100% {top: 0px;}}
@-o-keyframes slideDown {0% {top: -59px;} 100% {top: 0px;}}
@-ms-keyframes slideDown{0% {top: -59px;} 100% {top: 0px;}}
@keyframes slideDown {0% {top: -59px;} 100% {top: 0px;}}

如有任何帮助，我们将不胜感激。

Answer 1

尝试删除这些 css 行(从第 211 行开始)

#access li:hover    {
-webkit-animation:none;
-moz-animation:none;
-o-animation:none;
-ms-animation:none;
animation:none;
}

-webkit-animation-iteration-count: 一次；无效，但它默认为 1，所以当动画完成时，它不会再次开始，我认为 animation:none 会打破它并重置动画。