La animación de fotogramas clave CSS3 solo funciona en Firefox

Estoy tratando de hacer uso de este CodePen.

Aquí está mi problema: http://jacobstone.co.uk/Livetesting/Vertical%20scroll%20text/index.html

I can currently only get it to work in Firefox, and not Chrome or Safari. Am I using the prefixes wrong? Been trying to get this working for ages now!

body{
font:normal 40px/50px Arial, sans-serif;
color:#999;
}
.anim p{
height:50px;
float:left;
margin-right:0.3em;
}
.anim b{
float:left;
overflow:hidden;
position:relative;
height:50px;
}
.anim span1{
display:inline-block;
color:#e74c3c;
position:relative;
white-space:nowrap;
top:0;
left:0;
/*animation*/
-webkit-animation:move 5s;
   -moz-animation:move 5s;
    -ms-animation:move 5s;
     -o-animation:move 5s;
        animation:move 5s;
/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
   -moz-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
     -o-animation-iteration-count:infinite;
        animation-iteration-count:infinite;
/*animation-delay*/
-webkit-animation-delay:1s;
   -moz-animation-delay:1s;
    -ms-animation-delay:1s;
     -o-animation-delay:1s;
        animation-delay:1s;
}
@keyframes move{
0%  { top: 0px; }
20% { top: -50px; }
40% { top: -100px; }
60% { top: -150px; }
80% { top: -200px; }
}

Also, any idea how I can get all the text vertically aligned?

preguntado el 04 de marzo de 14 a las 14:03

In my chrome everything is ok -

Thanks for replying. Can you confirm that the second link works not just the code pen link? -

2 Respuestas

You need to use vendor specific prefixes in @keyframes too. It works in Codepen because it checks what browser you use and adds the prefix automágicamente. If you inspected the codepen output you'd notice.

@-webkit-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-moz-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@-o-keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}
@keyframes move {
    0%  { top: 0px; }
    20% { top: -50px; }
    40% { top: -100px; }
    60% { top: -150px; }
    80% { top: -200px; }
}

respondido 04 mar '14, 15:03

Codepen works, your site does not.

You need to use prefixed version of keyframes too:

@-webkit-keyframes

Referencia completa https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

respondido 04 mar '14, 15:03

see similar answers stackoverflow.com/questions/16885825/… stackoverflow.com/questions/17396980/… - Ruskin

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.