Otro ejemplo de animaciones con CSS

Crear animaciones con CSS es interesante pero engorroso; además, para que funcionen, hay que agregar los prefijos de cada navegador lo que hace que el código a escribir sea largo. De todos modos, aunque sea experimental, es algo para probar y ver qué pasa. Para más información: Mozilla | Chrome/Safari | w3.org.

En este caso, se trata de un ejemplo creado por David Walsh, un grupo de imagenes superpuestas que se expanden cuando ponemos el puntero del ratón encima de ellas.

El HTML es muy simple:

<a href="javascript:void(0);" class="album">
  <img src="URLIMAGEN_1" class="photo1" />
  <img src="URLIMAGEN_2" class="photo2" />
  <img src="URLIMAGEN_3" class="photo3" />
</a>

Las reglas de estilo básicas también:

<style>
  .album {
    display:block;
    position: relative;
    vertical-align: top;
    width: 250px;
    z-index: 5;
  }
  .album img {
    border: 10px solid #ABC;
    display: block;
    height: 250px;
    left: 0;
    position: absolute;
    top: 0;
    width: 250px;
  }
  /* un agregado para que las imágenes se ponga en primer plano */
  .album img:hover {
    z-index: 1000;
  }
</style>

Y por último, la animación en si misma:

<style>
  @-moz-keyframes image1 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
  }
  @-webkit-keyframes image1 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);}
  }

  @-moz-keyframes image2 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
  }
  @-webkit-keyframes image2 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);}
  }

  @-moz-keyframes image3 {
    0% {-moz-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
  }
  @-webkit-keyframes image3 {
    0% {-webkit-transform: rotate(0deg) translate(0, 0) scale(1.0);}
    100% {-webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);}
  }

  .album:hover .photo1, .album:focus .photo1 {
    -moz-animation-name: image1;
    -moz-animation-duration: .2s;
    -moz-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
    -webkit-animation-name: image1;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(-6deg) translate(-130px, -3px) scale(1.1);
  }
  .album:hover .photo2, .album:focus .photo2 {
    -moz-animation-name: image2;
    -moz-animation-duration: .2s;
    -moz-transform: rotate(0deg) translate(0, -3px) scale(1.1);
    -webkit-animation-name: image2;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(0deg) translate(0, -3px) scale(1.1);
  }
  .album:hover .photo3, .album:focus .photo3 {
    -moz-animation-name: image3;
    -moz-animation-duration: .2s;
   -moz-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
    -webkit-animation-name: image3;
    -webkit-animation-duration: .2s;
    -webkit-transform: rotate(6deg) translate(130px, -3px) scale(1.1);
  }
</style>