CSS3动画不工作，即使我使用前缀

我写了前缀，至少在我眼里是这样。动画不工作在Chrome或mozilla。codepen上的代码工作得很好，但是当我为我的网站复制并粘贴style.css文件并运行它时，它就是不起作用。

 li:hover > ul.drop-menu li {
  opacity: 0;
  -webkit-animation-name: menu1;
  -moz-animation-name: menu1;
          animation-name: menu1;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
   -webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
           animation-fill-mode: forwards;
}
@-webkit-keyframes menu1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes menu1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes menu1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="container">
        <nav>
  <ul>
    <li>style 1
      <ul class="drop-menu menu-1">
        <li>uno</li>
        <li>dos</li>
        <li>tres</li>
        <li>cuatro</li>
        <li>cinco</li>
        <li>seis</li>
      </ul>
    </li>
    <li>style 2
      <ul class="drop-menu menu-2">
        <li>uno</li>
        <li>dos</li>
        <li>tres</li>
        <li>cuatro</li>
        <li>cinco</li>
        <li>seis</li>
      </ul>
    </li>
  </ul>
</nav>
    </div>
</body>
</html>

如果您的路径是正确的，它应该工作。您仍然可以尝试:

检查大括号和分号。
检查类名
通过li:hover事件应用background-color到body，查看该事件是否完全工作
把css代码写在同一个页面
检查是否有其他代码覆盖你的动画(例如检查.menu-1和.menu-2看你是否放一些display:none)。
休息一下，当你头脑清醒时再检查
无论如何，我认为……

你可以使用transition-property作为你的动画。
最好写li:hover > ul.drop-menu而不是li:hover > ul.drop-menu li，因为ul包裹li。
这是使用transition:
的结果
ul.drop-menu{ height:0px; overflow:hidden; opacity: 0; -webkit-transition: opacity 1s; -webkit-transition-timing-function: ease-in-out; transition: opacity 1s; transition-timing-function: ease-in-out; } li:hover > ul.drop-menu { height: auto; overflow: visible; opacity: 1; }
<nav> <ul> <li>style 1 <ul class="drop-menu menu-1"> <li>uno</li> <li>dos</li> <li>tres</li> <li>cuatro</li> <li>cinco</li> <li>seis</li> </ul> </li> <li>style 2 <ul class="drop-menu menu-2"> <li>uno</li> <li>dos</li> <li>tres</li> <li>cuatro</li> <li>cinco</li> <li>seis</li> </ul> </li> </ul> </nav>
好运。

相关内容

最新更新

热门标签：