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，所以当动画完成时，它不会再次启动，我认为动画：none会打破这个并重置动画。

Answer 2

我认为您的style.css：

存在问题

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

将鼠标悬停在外部li上时将动画设置为无，但随后通过内部元素进行释放。所以它回滚到普通动画并再次执行一次;）

Answer 3

从CSS中删除此样式：

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

Answer 4

IMHO css3 animation无法在悬停时运行。这不是其他类型的影响吗？ Css3 transtion或一些javascript？

悬停时的动画

4 个答案: