aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Una de las novedades que WebKit integra y que Mobile Safari tambien se aprovecha son las CSS Animations, una propuesta del equipo de desarrollo de webkit con el que podemos definir animaciones asociadas en nuestros ficheros CSS.

.divSlide {
        -webkit-animation-name: "slide-me-to-the-right";
        -webkit-animation-duration: 1s;
}
@-webkit-keyframes "slide-me-to-the-right" {
        from { left: 0px; }
        to { left: 100px; }
}

Este código es el que produce la mágia que podemos ver en este ejemplo de MyDailyPhoto (Requiere iPhone 2.0). En el podemos ver que mediante la integración de los eventos touch del iPhone/iTouch va cambiando las clases de los elementos a los que se les aplican los estilos.

Destripemos un poco más el código:

.CLASS {
        -webkit-animation-name: "ANIMATION_NAME";
        -webkit-animation-duration: 1s;
}

Por un lado definimos la animación con -webkit-animation-name, y la duración de la animación con -webkit-animation-duration. Una vez definida la animación debemos definir le cuerpo de la animación:

@-webkit-keyframes "ANIMATION_NAME" {
        from { left: 0px; }
        to { left: 100px; }
}

En este caso la animación animación modifica el left del elemento al que le hayamos específicado la class CLASS para desplazarlo 100px.

Gracias a las posibilidades que las CSS Animations nos ofrecen podemos hacer cosas como estas:

// Giramos a la izquierda
.flip-left {
    -webkit-animation-name: "flip-left";
    -webkit-backface-visibility: hidden;
}
@-webkit-keyframes flip-left {
    from { -webkit-transform: rotateY(180deg); }
    to { -webkit-transform:  rotateY(0deg); }
}

// Giramos a la derecha
.flip-right {
    -webkit-animation-name: "flip-right";
    -webkit-backface-visibility: hidden;
}
@-webkit-keyframes flip-right {
    from { -webkit-transform: rotateY(0deg); }
    to { -webkit-transform:  rotateY(180deg); }
}

// Hacemos aparecer el elemento
.show {
    -webkit-animation-name: "show";
    -webkit-animation-duration: 1s;
}
@-webkit-keyframes show {
    from { opacity:0; }
    to { opacity:1; }
}

Usando estas propiedades y un poco de PHP he montado una pequeña galería de imagenes (solo hay 3 fotos) a modo de prueba para que veais los chulo que puede quedar.

Más información

Desde Wayne Pan descubro una función JS con la que encontrar una animación fácilmente.

var findAnimation = function(name) {
      var ret_rule = null, sheets = document.styleSheets;
      for(var i = sheets.length - 1; i >= 0 ; i--) {
        var sheet = sheets[i];
          for(var j = sheet.cssRules.length - 1; j >= 0; j--) {
            var rule = sheet.cssRules[j];
              // 7 means the keyframe rule
              if(rule.type === 7 && rule.name == name) {
                ret_rule = rule;
                break;
              }
            }
      }
      return ret_rule;
    }
  findAnimation('shrink-n-grow-animation').findRule('50%').style.height = '25px';

Desde Ajaxian presentan Transformie, un plugin de jQuery que nos permite disfrutar de estas transformaciónes en IE, para ello hace uso de DXImageTransform.Microsoft.Matrix.