Transformaciones y transiciones CSS3 (Webkit)

Question

Transformaciones y transiciones CSS3 (Webkit)

Considere el siguiente violín

p {
  -webkit-transform: translate(-100%, 0);
     -moz-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  -webkit-transition: transform 1s ease-in;
     -moz-transition: transform 1s ease-in;
       -o-transition: transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover + p {
  -webkit-transform: translate(0, 0);
     -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

La transición funciona sin problemas en FF, pero no hay transición en absoluto en Safari o Chrome (en mi Mac).

¿Tiene prefijo la propiedad transition o hay algún tipo de error de sintaxis en mi código?

39

css3 webkit css-transitions css-transforms

Author: Jordi Vicens, 2012-12-09

Source

1 answers

score 96 · Accepted Answer

Agregue el prefijo de proveedor en las transiciones:

p {
  -webkit-transform: translate(-100%, 0);
     -moz-transform: translate(-100%, 0);
      -ms-transform: translate(-100%, 0);
       -o-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  -webkit-transition: -webkit-transform 1s ease-in; /* Changed here */ 
     -moz-transition: -moz-transform 1s ease-in;
       -o-transition: -o-transform 1s ease-in;
          transition: transform 1s ease-in;
}

a:hover + p {
  -webkit-transform: translate(0, 0);
     -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
       -o-transform: translate(0, 0);
          transform: translate(0, 0);
}

Actualizar (05/06/2014)

Para responder a algunos comentarios, la razón para omitir -ms-transition, es que nunca ha existido.

Compruebe:

Puedo Usar? Transiciones ,

Puedo Usar? Transforms ,

Transiciones MDN ,

Transformaciones MDN