CSS3 Keyframes animation doesn't work in Mozilla Firefox

Question

i am using css3 to animate text and i have a linear text animation which works perfecty in Chrome, but it doesn't do the animation in Mozilla. Anyone help?

<div class='visible'>
<p>
  Hello
</p>
<ul>
  <li>world !</li>
  <li>Bob !</li>
  <li>users !</li>
</ul>

.content:after,
.content:before {
  color: #16a085;
  font-size: 42px;
  animation: 2s linear 0 normal none infinite opacity;
  -webkit-animation: 2s ease-out 0 normal none infinite opacity;
  -moz-animation: 2s ease-out 0 normal none infinite opacity;
  -o-animation: 2s ease-out 0 normal none infinite opacity;
}

ul {
  margin-top: 0;
  padding-left: 110px;
  text-align: left;
  list-style: none;
  animation: 6s linear 0 normal none infinite change;
  -webkit-animation: 6s linear 0 normal none infinite change;
  -moz-animation: 6s linear 0 normal none infinite change;
  -o-animation: 6s linear 0 normal none infinite change;
}

@-webkit-keyframes opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes change {
  0% {
    margin-top: 0;
  }
  15% {
    margin-top: 0;
  }
  25% {
    margin-top: -40px;
  }
  40% {
    margin-top: -40px;
  }
  50% {
    margin-top: -80px;
  }
  65% {
    margin-top: -80px;
  }
  75% {
    margin-top: -40px;
  }
  85% {
    margin-top: -40px;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes change {
  0% {
    margin-top: 0;
  }
  15% {
    margin-top: 0;
  }
  25% {
    margin-top: -40px;
  }
  40% {
    margin-top: -40px;
  }
  50% {
    margin-top: -80px;
  }
  65% {
    margin-top: -80px;
  }
  75% {
    margin-top: -40px;
  }
  85% {
    margin-top: -40px;
  }
  100% {
    margin-top: 0;
  }
}

Here's the jsfiddle Link: http://jsfiddle.net/ion_torres/hzqE8/

Answer 1

my animation doesn't work on Mozilla and safari too, but it works perfectly on chrome here is my code:

  .menu-getboarder {
    /* border-right : 1px solid; */
    -webkit-animation-name: blink ;
            animation-name: blink ;
    -webkit-animation-duration: .5s ;
            animation-duration: .5s ;
    -webkit-animation-timing-function: step-end ;
            animation-timing-function: step-end ;
    -webkit-animation-iteration-count: infinite ;
            animation-iteration-count: infinite ;
    -webkit-animation-direction: alternate ;
            animation-direction: alternate ;
    }

@-webkit-keyframes blink {
    0% {
        -wbekit-border-right: 0px;
    }

    50% {
        -webkit-border-right: 1px solid black;
    }

    100% {
        -webkit-border: 0px;
    }}

@keyframes blink {
    0% {
        border-right: 0px;
    }

    50% {
        border-right: 1px solid black;
    }

    100% {
        border: 0px;
    }}

@-moz-keyframes blink {
    0% {
        border-right: 0px;
    }

    50% {
        border-right: 1px solid black;
    }

    100% {
        border: 0px;
    }}

Answer 2

Well, you must say that the delay is in seconds.

For instance: animation: 6s linear 0s normal none infinite change;

Firefox is somehow tricky with that.

(ps: Here a jsFiddle of it working with the same order, just by adding the 's' of seconds).