Pequeño juego en (puro) CSS – Selectores, jerarquias y animaciones

Hace un tiempo, estaba jugando en codepen.io intentando hacer una cara en css.
Luego, decidí darle un poco màs de vida, respondiendo a ciertos eventos.

ghosts

Simplemente agregando estilos distintos al :active de la cara en cuestion.

Una vez hecho esto, intente darle un poco de interacción con otros elementos. Algo que se logra fácilmente con pseudo selectores y jerarquia.

Por ejemplo:


.face:hover + .ghost .eye.right {
  display: none;
}

Estoy ocultaría el elemento de clase eye y right que sean hijos de un elemento con clase ghost que sea hermano de un elemento con clase face que posea el pseudo-selector hover. Es decir, ocultaría el ojo izquierdo del fantasma cuando nos paremos, con el mouse, arriba en la cara.

Para las animaciones, en principio había usado animations, pero luego lo cambie para usar, simplemente, transitions.
Lo importante a tener en cuenta con esto, es de tener cuidado de no animar atributos que modifiquen la caja del elemento que estamos animando (left, right, top, bottom, width, heigth, margin, padding). Cambiar, por ejemplo, el ancho (width) de un elemento, hace que el navegador tenga que recalcular la posición del elemento y de aquellos que se encuentran a su alrededor (reflow), lo cual es algo costoso y, normalmente, se nota una animación poco fluida.
Para estos casos, debemos valernos de la propiedad transform, la cual nos permite aplicar diferentes transformaciones a nuestro elemento, haciendo que el browser solo tenga que repintar el mismo, sin preocuparse por nada más.
Más información sobre reflows y repaints, pueden ver este articulo: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/ o este, un poco más general sobre el funcionamiento del browser: http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

En fin, el ejemplo pueden verlo en este codepen: The Adventures of Mr. Ball
Es un simple juego en el que hay dos fantasmas escondidos en la pantalla. La cara reacciona a diferentes eventos (hover en los fantasmas, click en la cara y click en los fantasmas)