CSS Animations Tutorial: 7 Essential Motion Techniques

Welcome to this CSS animations tutorial. Motion is what makes an interface feel alive — smooth hover effects, sliding menus, and eye-catching entrance animations all come from a handful of CSS properties.

This is Tutorial 9 of 10 in our complete CSS series on Tutorials Ocean’s CSS category. If you missed it, check out Tutorial 8: Responsive Design & Media Queries first.

CSS Transitions: The Basics

Every CSS animations tutorial should start with transitions, since they’re the simplest way to add smooth motion between two states.

.button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: darkblue;
}

Without transition, the color change on hover would happen instantly. With it, the change smoothly animates over 0.3 seconds.

Transition Properties Explained

.card {
    transition-property: transform, box-shadow;
    transition-duration: 0.4s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

/* Shorthand */
.card {
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

For the full official reference, check the MDN documentation on CSS transitions.

The transform Property

transform is what actually moves, rotates, scales, or skews an element — and it pairs perfectly with transitions in any CSS animations tutorial.

.box {
    transform: scale(1.1);
}

.box-rotated {
    transform: rotate(45deg);
}

.box-moved {
    transform: translateX(20px);
}

Key advantage worth remembering from this CSS animations tutorial: transform doesn’t affect the layout of surrounding elements, unlike changing width or margin directly — making it much more performant for animations.

Combining Transform with Hover

.card {
    transform: scale(1);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
}

This is one of the most common patterns in real websites — cards or buttons that gently grow when hovered, giving instant visual feedback to the user.

CSS Keyframe Animations

For more complex, multi-step animations, transitions aren’t enough. That’s where @keyframes comes in — the more advanced half of any CSS animations tutorial.

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

.banner {
    animation: slideIn 0.6s ease-out;
}

@keyframes defines the stages of the animation using from/to, or percentages like 0%, 50%, 100% for more control. The animation property then applies it to an element.

Animation Properties

.banner {
    animation-name: slideIn;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Practice Exercise

Open the style.css file from Tutorial 8 and add motion to your page.

Requirements:

1. Add a smooth hover transition to your buttons, changing background-color over 0.3s
2. Make your cards scale up slightly on hover using transform: scale()
3. Create a @keyframes animation that fades and slides in your page header when the page loads
4. Apply that keyframe animation using the animation property with a 0.6s duration
5. Experiment with different transition-timing-function values and compare how they feel

Bonus challenge: Create a looping pulse animation on a “notification” badge using animation-iteration-count: infinite and animation-direction: alternate.

Save your file, refresh your browser, and hover over your elements to see the animations in action.

What’s Next?

This completes Tutorial 9 of our CSS animations tutorial series. In Tutorial 10, our final tutorial, we’ll combine everything into one complete mini project — a full responsive, animated website built from scratch.

This CSS animations tutorial is part of the complete CSS series on Tutorials Ocean — practical, beginner-friendly web development tutorials. Follow along and build real projects as you learn.