Animations - Keyframe Animations

What are CSS Animations?

CSS Animations allow you to create complex animations using keyframes. Unlike transitions (which go from A to B), animations can have multiple steps and loop infinitely.

Animation Properties - Quick Reference

Property	Description	Example
`animation-name`	Keyframe name	`animation-name: slideIn;`
`animation-duration`	Animation length	`animation-duration: 2s;`
`animation-timing-function`	Speed curve	`animation-timing-function: ease;`
`animation-delay`	Start delay	`animation-delay: 0.5s;`
`animation-iteration-count`	Repeat count	`animation-iteration-count: infinite;`
`animation-direction`	Play direction	`animation-direction: alternate;`
`animation-fill-mode`	Before/after state	`animation-fill-mode: forwards;`
`animation-play-state`	Pause/play	`animation-play-state: paused;`
`animation`	Shorthand	`animation: slideIn 2s ease infinite;`

Creating Keyframes

Syntax:

@keyframes animation-name {
    from {
        /* Starting state */
    }
    to {
        /* Ending state */
    }
}

/* OR */

@keyframes animation-name {
    0% {
        /* Starting state */
    }
    50% {
        /* Middle state */
    }
    100% {
        /* Ending state */
    }
}

Detailed Examples

1. Fade In

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

.fade-in {
    animation: fadeIn 1s ease;
}

2. Slide In

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.slide-in {
    animation: slideIn 0.5s ease-out;
}

3. Bounce

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

.bounce {
    animation: bounce 1s infinite;
}

4. Spin

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 2s linear infinite;
}

5. Pulse

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

Animation Properties

animation-iteration-count

.once {
    animation-iteration-count: 1; /* Play once */
}

.three-times {
    animation-iteration-count: 3;
}

.infinite {
    animation-iteration-count: infinite;
}

animation-direction

.normal {
    animation-direction: normal; /* Forward */
}

.reverse {
    animation-direction: reverse; /* Backward */
}

.alternate {
    animation-direction: alternate; /* Forward then backward */
}

animation-fill-mode

.forwards {
    animation-fill-mode: forwards; /* Stay at end state */
}

.backwards {
    animation-fill-mode: backwards; /* Start at beginning state */
}

.both {
    animation-fill-mode: both;
}

Common Animation Patterns

Pattern 1: Loading Spinner

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

Pattern 2: Shake

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.shake {
    animation: shake 0.5s;
}

Pattern 3: Typing Effect

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid;
    animation: typing 3.5s steps(40) forwards;
}

Pattern 4: Fade In Up

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

Animations - Keyframe Animations

On this page