Sin transition, un cambio de estilo salta de golpe. Con transition, el navegador rellena todos los pasos intermedios solo.

Se combina con :hover —"cuando el mouse esté encima"— para el efecto más típico de la web.

Without transition, a style change jumps instantly. With transition, the browser fills in every step in between on its own.

It combines with :hover — "when the mouse is over it" — for the web's most typical effect.

transform mueve, gira o escala un elemento sin afectar a los demás —a diferencia de cambiar margin, que sí empuja el resto de la página—. Por eso es la opción preferida para animar.

transform moves, rotates or scales an element without affecting others — unlike changing margin, which does push the rest of the page. That is why it is the preferred choice for animating.

transition necesita un disparador —como :hover—. Para algo que se mueva todo el tiempo, sin que nadie haga nada, se usa @keyframes: defines cómo se ve al 0%, en puntos intermedios, y al 100%, y el navegador anima entre esos puntos en bucle.

transition needs a trigger — like :hover. For something that moves all the time, with nobody doing anything, you use @keyframes: you define what it looks like at 0%, at points in between, and at 100%, and the browser animates between those points in a loop.

infinite repite para siempre. ease-in-out hace que el movimiento empiece y termine suave, en vez de a velocidad constante.

infinite repeats forever. ease-in-out makes the movement start and end smoothly, instead of at a constant speed.

Junta todo: transition para el hover, y una pequeña animación de pulso constante con @keyframes, para que el botón se note incluso sin tocarlo.

Put it all together: transition for the hover, and a small constant pulse animation with @keyframes, so the button stands out even without touching it.

transition con :hover, transform para mover sin empujar, y @keyframes para animaciones que se repiten solas. Todo sin tocar JavaScript.

Ya tienes una página que se ve bien y que se mueve. Falta lo último: que exista en internet.

transition with :hover, transform to move without pushing, and @keyframes for animations that repeat on their own. All without touching JavaScript.

You already have a page that looks good and moves. One thing left: getting it onto the internet.