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

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

html css animation

Html CSS3动画不工作，即使我使用前缀,html,css,animation,css-transitions,Html,Css,Animation,Css Transitions,我写了前缀，至少在我眼里是这样。该动画在Chrome或Mozzila上都不起作用。codepen上的代码工作得很好，但当我复制并粘贴到网站的style.css文件并运行它时，它就是不起作用 li:hover > ul.drop-menu li { opacity: 0; -webkit-animation-name: menu1; -moz-animation-name: menu1; animation-name: menu1; -webkit-an

我写了前缀，至少在我眼里是这样。该动画在Chrome或Mozzila上都不起作用。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;
  }
}

HTML

<!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>



风格1

乌诺
dos
特雷斯
库托
辛科
赛斯


风格2

乌诺
dos
特雷斯
库托
辛科
赛斯

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

检查大括号和分号
检查类名
通过
```
li:hover
```
事件将背景色应用于主体，查看该事件是否无法完全工作
在同一页中编写css代码
检查是否有其他代码正在覆盖动画（例如，检查
```
.menu-1
```
和
```
.menu-2
```
查看是否放置了一些
```
显示：无
```
）
休息一下，等你头脑清醒后再检查

不管怎样，我认为

您可以对动画使用

转换属性。


写li:hover>ul.drop menu
比写li:hover>ul.drop-menu li
更好，因为ul
包装li
这是使用转换的结果：

ul.下拉菜单{
高度：0px；
溢出：隐藏；
不透明度：0；
-webkit转换：不透明度1s；
-webkit转换计时功能：轻松输入输出；
过渡：不透明度1s；
过渡定时功能：易进易出；
}
li：悬停>ul.下拉菜单{
高度：自动；
溢出：可见；
不透明度：1；
}


风格1

乌诺
dos
特雷斯
库托
辛科
赛斯


风格2

乌诺
dos
特雷斯
库托
辛科
赛斯



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

检查大括号和分号
检查类名
通过li:hover
事件将背景色应用于主体，查看该事件是否无法完全工作
在同一页中编写css代码
检查是否有其他代码正在覆盖动画（例如，检查.menu-1
和.menu-2
查看是否放置了一些显示：无
）
休息一下，等你头脑清醒后再检查

不管怎样，我认为
您可以对动画使用转换属性。

写li:hover>ul.drop menu
比写li:hover>ul.drop-menu li
更好，因为ul
包装li
这是使用转换的结果：

ul.下拉菜单{
高度：0px；
溢出：隐藏；
不透明度：0；
-webkit转换：不透明度1s；
-webkit转换计时功能：轻松输入输出；
过渡：不透明度1s；
过渡定时功能：易进易出；
}
li：悬停>ul.下拉菜单{
高度：自动；
溢出：可见；
不透明度：1；
}


风格1

乌诺
dos
特雷斯
库托
辛科
赛斯


风格2

乌诺
dos
特雷斯
库托
辛科
赛斯



您是否正确链接了css？它是如何工作的？你看到ul孩子了吗？至少我在html中编辑了一些html，但是我说我链接了html和css，因为style.css的其余部分工作得很好，唯一的问题是在那个特定部分。可能会将链接href更改为href=“/css/style.css”
你链接css正确了吗？它怎么不工作？你看到ul孩子了吗？至少我在html中编辑了一些html，但我说我链接了html和css，因为style.css的其余部分工作得很好，唯一的问题是在那个特定部分。可能会将链接href更改为href=“/css/style.css”