Mover un elemento alrededor de un círculo con @keyframes de Css 14.3.12

Mover un elemento alrededor de un círculo con @keyframes de Css

Lo que en un principio puede hacernos pensar en la complejidad de los pasos intermedios para lograr mover un elemento alrededor de un círculo no es tanto. Además con el añadido de que en la traslación no haya rotación. Esto es, que el elemento no de vueltas sobre sí mismo.
Tan sólo se necesitan 2 frames. La inicial y final. Y una particularidad soportada por firefox y chorme: fíjate que las distintas propiedades incluidas en cada frame no están separadas por comas (,)

Créditos: realización original de Lea Verou y me la encontré en su página.

Y sin más, el ejemplo y su código Css:

☻


@keyframes rot {
 from {
  transform: rotate(0deg)
             translate(-150px)
             rotate(0deg);
 }
 to {
  transform: rotate(360deg)
             translate(-150px) 
             rotate(-360deg);
 }
}
.smile {
 width: 40px;
 height: 40px;
 position: absolute;
 top: 200px;
 left: 50%;
 margin: -20px;
 font-size: 100px;
 color: orange;
 animation: 3s rot infinite linear;
}

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.