CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

La reciente salida de la beta de Safari 4 ha creado una nueva propuesta en el equipo de Webkit, controlar animaciones mediante CSS. A través de esta propuesta se pueden utilizar los Keyframes, Animations, Animation behavior, Animation events

para obtener muchos comportamientos variados con CSS sin necesidad de usar Javascript. Eso sí, el motor con el que el navegador actúa debe ser Webkit (Safari u Google Chrome, por ejemplo, lo soportan).

¿Habéis oido hablar alguna vez del juego “Pong“? No vamos a enseñarnos ningún juego, solo un ejemplo de cómo crear este juego utilizando CSS Animation.

Usa tres animaciones simples (left-right y ball) para mover la pala arriba y abajo y la bola hacia la izquierda y derecha. La pala izquierda usa extra keyframe para hacer el movimiento más lento cuando esté por la mitad de su recorrido:

@-webkit-keyframes left {
from { top: 20px; }
to { top: 150px; }
}
@-webkit-keyframes ball {
from { left: 40px; top: 60px; }
to { left: 340px; top: 150px; }
 }
@-webkit-keyframes right {
from { bottom: 120px; }
50% { bottom: 60px; }
to { bottom: 40px; }
}

El estado :hover llama a la animación para que se inicie, a la vez que define la velocidad y la transición (Esto quiere decir que deberemos mover el ratón encima del Pong para que la animación se inicie).

#court:hover div {
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-direction: alternate;
}
#court:hover #paddle-left { -webkit-animation-name: left;  }
#court:hover #ball { -webkit-animation-name: ball; }
#court:hover #paddle-right { -webkit-animation-name: right; }

XHTML 1.0 estricto válido.

CSS 2.1 inválido.

Como siempre, se puede ver un ejemplo de su funcionamiento (Recordemos que este hack es compatible solamente con Safari, Google Chrome y todos los navegadores basados en Webkit. Pasar el ratón por encima del Pong para empezar a ver la animación).

¿Nos os parece una idea divertida?

Vía | CSSNoLanche