Las transiciones y transformaciones CSS funcionan maravillosamente para crear interacciones visuales basadas en cambios de estado individuales. Para tener más control sobre lo que sucede y cuándo, puede usar la propiedad de animación CSS para crear una animación CSS fácil usando @keyframes. Esta técnica tiene una amplia gama de aplicaciones de diseño y se puede utilizar para crear deslumbrantes precargadores, interfaces interactivas, efectos o narraciones a gran escala. En este tutorial aprenderá cómo aplicar lo que sabe sobre las transiciones CSS para dominar rápidamente la animación, y cómo usar @keyframes para aplicar varias reglas de estilo a su elemento a diferentes intervalos.

Link: https://webdesignerwall.com/tutorials/easy-css-animation-using-keyframes