soy Kseso y esto EsCSS

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

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

·Por Kseso ✎ 0

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; }

avatar del Editor del blog

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