What are keyframes in CSS animations?

@keyframes define the steps of an animation over time.

Example:

@keyframes moveBox {

0% { left: 0; }

100% { left: 200px; }

.box {

position: relative;

animation: moveBox 2s linear infinite;

Follow me on LinkedIn:

Key Takeaway:

Keyframes control how elements move, rotate, or fade during animation.