keyframes CSS

@keyframes is a CSS at-rule

Used for controlling more complicated CSS animations than with the transitition property..

@keyframes defines a "keyframe list", which specify percentages along the animation and which styles to apply. Or, you can use the properties from and to as shorthands for 0% and 100% respectively.

@keyframes float-up-down {
    /* This is equivalent to 0% { ... } */
    from {
        transform: translateY(0);
    }

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

    /* This is equivalent to 100% { ... } */
    to {
        transform: translateY(0);
    }
}

Note

!important inside keyframes is ignored.

Using a keyframes animation

Use a keyframes animation in the animation property.

/* ripped straight from MDN, baby 😌 */

/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused float-up-down;

/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s float-up-down;

/* the above is equivalent to: */
animation-name: float-up-down;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;