Hola a todos! He hecho una pagina web solo con css y html. El problema es que las animaciones de CSS3 no se ven en firefox, y no se muy bien como hacer que firefox las reconozca.
Código HTML:
@-webkit-keyframes plumas {
from {top: -300px;} /* Capa desplazamiento vertical de los copos */
to {top: 625px;}
}
@-webkit-keyframes pluma{
0% { -webkit-transform: rotate(-35deg) translate(10px, 50px);} /* La trayectoria es definida por los deg*/
50% { -webkit-transform: rotate(95deg) translate(10px, 50px);}
100% { -webkit-transform: rotate(-60deg) translate(10px, 90px);} /* Los copos van del 10px al 75px*/
}
#pluma div { /* div para que todo funcione*/
position: absolute;
top: -40px;
-webkit-animation-name: pluma, plumas;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in; }
.pluma { color: #fff; position: absolute;} /* Caracteristicas generales de todos los copos*/
.pluma.f1 { left: 20px; -webkit-animation-duration: 8s;} /* Caracteristicas particulares de cada copo*/
.pluma.f2 { left: 500px; -webkit-animation-duration: 10s; }
.pluma.f3 { left: 820px; -webkit-animation-duration: 6s;}
Código HTML:
<div id="pluma">
<div class="pluma f1"><img src="objetos/p1.png" border="0"></div>
<div class="pluma f2"><img src="objetos/p2.png" border="0"></div>
<div class="pluma f3"><img src="objetos/p3.png" border="0"></div>
</div>
Hace poco que estoy haciendo webs, y tengo vatios problemas a la hora de que se vean igual en chrome y en firefox. La única manera que tengo de que vaya bien en mozila es añadiendo -moz- , pero no siempre me soluciona el problema. Hay algún recurso, alguna web o documento, donde explique el css para firefox?