CSS3 Keyframes animation doesn't work in Mozilla Firefox -

CSS3 Keyframes animation doesn't work in Mozilla Firefox -

i using css3 animate text , have linear text animation works perfecty in chrome, doesn't animation in mozilla. 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 alter { 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 alter { 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 jsfiddle link: http://jsfiddle.net/ion_torres/hzqe8/

well, must delay in seconds.

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

firefox somehow tricky that.

(ps: here jsfiddle of working same order, adding 's' of seconds).

css3 animation text