🎯 CSS @keyframes Rule

The @keyframes rule is a special CSS feature used to define the stages of an animation. It specifies how an element should appear at different points during an animation, allowing smooth transitions between styles.

Instead of changing directly from a starting state to an ending state, @keyframes lets you define multiple intermediate steps, giving you complete control over animation behavior.

A CSS animation consists of two parts:

• @keyframes → Defines the animation stages.
• animation → Applies the animation to an element.

The browser automatically calculates the intermediate values between the defined keyframes, creating smooth animations.

The from keyword defines the starting point of the animation.

@keyframes fadeIn {
    from {
        opacity: 0;
    }
}
                

In this example, the element starts completely invisible.

The to keyword defines the final state of the animation.

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}
                

Here, the element becomes fully visible at the end of the animation.

Percentage values define intermediate stages of an animation. This allows you to create more detailed and complex effects.

@keyframes slideMove {

    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(50px);
    }

    100% {
        transform: translateX(100px);
    }

}
                

In this example, the element gradually moves across the screen and reaches different positions at specific stages of the animation.

The following example creates a simple fade-in animation using @keyframes.

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

.box {
    animation: fadeIn 2s ease-in-out;
}
                

The element smoothly fades from invisible to fully visible over two seconds.

The @keyframes rule is essential for creating custom CSS animations. It gives developers precise control over every stage of an animation sequence.

• Create smooth and engaging animations
• Define multiple animation stages
• Build professional user interfaces
• Control movement, color, size, opacity, and more
• Works seamlessly with the animation property