CSS3 Animation not working even though I use prefix

Question

I wrote the prefix, in my eyes at least. The animation doesn't work on either Chrome or Mozzila. The code on codepen works fine, but when I copied and pasted on a style.css file for my website and run it, it just didn't work.

 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>

how is it not working ? you see the ul child or you do not ? — G-Cyrillus, Nov 17 '16 at 21:47
I edited in the html, yet i say i linked the html and css right since the rest of the style.css works just fine, the only problem is on that specific part. — George Angelonias, Nov 17 '16 at 22:04
As i said before, the rest of style.css works fine. The animation has the problem. — George Angelonias, Nov 17 '16 at 22:20
[How should you prefix transform properties in CSS3 animations?](http://stackoverflow.com/q/28545533/215552) — Heretic Monkey, Nov 17 '16 at 22:30
The `animation` is just set in the element when you are hovering the `
If you have added to an existing stylesheet, check your file for syntax errors. Your posted code is fine, either as an inline style or as a linked file. — PersyJack, Nov 18 '16 at 01:42

DisplayName · Answer 1 · 2016-11-17T23:16:14.390

If your path is correct, it should work. You can still try to:

check braces and semicolons.
check the class names.
apply a background-color to body through your li:hover event, looking if that event doesn't work completely.
write that css code in the same page.
check if there is other code that is overwriting your animation (for example check .menu-1 and .menu-2 looking if you put some display:none ).
take a break and check later when your mind is clear

Anyway I think that...

you could use transition-property for your animation.
is better write li:hover > ul.drop-menu than li:hover > ul.drop-menu li, because the ul wraps li.

This is the result using 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>

Good luck.

CSS3 Animation not working even though I use prefix

1 Answers1