CSS Animations

The Magic of Movement

Welcome to the world of CSS animations, where static websites come alive, and dull layouts transform into mesmerizing dances! CSS animations are like magical spells that allow your elements to perform on the stage of the internet—dancing, floating, and transforming effortlessly.

Once upon a time, animations were the exclusive domain of JavaScript wizards, but now, you can wield this powerful art using CSS alone. With a simple trick, your images, text, and containers will move with the elegance of a spellbook being turned by invisible hands. But beware! Like any great magic, it must be used wisely. Overdo it, and your website could spiral into a chaotic whirlwind of spinning boxes and bouncing buttons.

Let’s Keep Going

@keyframes
Timing-Functions
Loops and Iterations
Hover Effects
Animation Delays

Transform
Generators
Animate.css
wow.js

CSS Animations – Bring Your Elements to Life

Move, fade, pulse – make your design dynamic and vibrant!

@keyframes

The Heart of the Magic

The @keyframes rule is the very heart of every CSS animation. It serves as the secret blueprint that breathes life into your elements. Here, you craft the entire sequence of transformation: from subtle movements to dramatic effects.

You dictate when the stage changes, how your element rotates, grows, or fades. Every percentage in @keyframes represents a precise beat in the rhythm that adds a touch of enchantment to your design. With a bit of imagination, even the simplest element becomes the star of your web layout!

@keyframes slide {
    0% {
        transform: translateX(0);
    }

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

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

In this example, the .box moves 300 pixels to the right over a duration of 2 seconds. @keyframes defines the sequence of the animation, while the animation property specifies the timing.

Timing-Functions

The Rhythm of Your Animation

CSS animations can be equipped with various timing functions that let you control how fast or slow an animation progresses at specific points. It’s like conducting the tempo of a dance – sometimes quick, sometimes slow, depending on what you need.

.box {
    animation: slide 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

The cubic-bezier function gives you complete control over the animation’s timing. In this case, the .box accelerates and decelerates according to the rhythm you define.

Loops and Iterations

The Eternal Dance

If you’d like your animations to run endlessly, you can place them in loops. With the animation-iteration-count property, you decide how many times an animation repeats.

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

With the magical keyword infinite, your animation becomes an eternal dance. The .box gracefully slides to the right and returns to its starting point over and over again – like a never-ending pirouette.

Hover Effects

The Hidden Tricks

Not every animation needs to start immediately. With hover animations, you can unleash your magic only when the user hovers over an element. It’s like a secret spell that activates only upon touch.

.box {
    transition: transform 0.5s ease;
}

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

Here, the .box gracefully rotates 45 degrees as soon as the user hovers over it. The transition property ensures the animation runs smoothly.

Animation Delays

Magic with Patience

Sometimes, you may not want your animations to start immediately. With the animation-delay property, you can introduce a delay and let the magic unfold with intention and timing.

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

In this example, the animation waits for 1 second before starting. This gives you control over when the movement begins—perfect for creating surprise effects!

transform

The Spell of Transformations

The transform property is the magical tool that lets you rotate, move, scale, or tilt your elements in any direction. It ensures your animations run smoothly and seamlessly.

.box {
    transform: scale(1.5);
}

In this example, the .box is scaled to 1.5 times its original size. With transform, you can not only create dynamic animations but also visually alter elements effortlessly.

Generators

The Magical Helpers for Animations

Even the best wizard needs a little help sometimes, and that’s where CSS generators step in! Tools like the CSS Generator on webcode.tools allow you to craft complex animations without typing every line by hand. These magical tools let you create impressive movements and effects with just a few clicks. Whether you’re planning smooth transitions, vibrant keyframes, or dramatic effects, generators take the hard work out of the process by conjuring up the code for you.

Animate.css

The Library for Quick Magic

If you’d rather not craft every spell yourself, libraries like Animate.css offer a treasure chest of pre-made animations. With Animate.css, you can quickly add impressive effects like bouncing, fading, or sliding without writing a single line of CSS. Just include the library in your project, pick the desired animation, and watch your elements dance across your webpage’s stage! Animate.css provides fast access to a wide variety of ready-to-use animations—perfect for professional magic without the effort. Explore the library here: https://animate.style/

Fetch the library using a CDN (which is basically a magical network that delivers files lightning-fast from another server—so you don’t have to own the file yourself) and include it in the head section of your HTML file. Alternatively, you can also use the file already placed in your working folder.
Here is the CDN: https://cdnjs.com/libraries/animate.css.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

Now, you can summon animations directly in your HTML using attributes. But beware! Simply adding Animate.css is like casting a spell without knowing its incantation—you’ll need some sage advice! Consult Morrigan, who knows the secrets of controlling animations so they enchant only when the user is ready to see them. Without her guidance, your page might unleash everything at once, leaving the magic to fizzle out before anyone scrolls to the lower sections.

<div class="animate__animated animate__bounce">I'm a bouncing box!</div>

WOW.js – Animations with Purpose and Precision

No wild twitching—just movement exactly when it’s needed.

Animations are great—but only when they happen at the right moment. WOW.js ensures that they start only when they truly come into view. Without WOW.js, animations begin immediately, whether you can see the element or not—and that’s about as useful as a magic trick without an audience. With this script, animations only run when the element enters the visible area of the page, so nothing fizzles out unnecessarily.

Include the library:

Insert this code into your HTML, just before the </body> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script>new WOW().init();</script>

Prepare the elements:

Assign the class wow and an animation from Animate.css to every element you want to animate.

<p class="wow animate__fadeIn">I’ll only appear once you see me!</p>

Experience the magic:

Scroll, enjoy, and watch your page come to life—exactly when it makes sense.

In this lesson, you have learned…

How to use @keyframes to create animations that move, rotate, or fade elements in a targeted way.
Why timing functions (ease, linear, cubic-bezier) are important for making animations feel smooth and natural.
How animation-iteration-count lets you control whether an animation runs once or loops endlessly.
How hover effects allow you to create interactive animations that only trigger on user interaction.
Why animation-delay is useful for starting animations with a delay, adding rhythm and flow.
How transform provides the foundation for smooth motion effects in your animations.
Why CSS generators and libraries like Animate.css are helpful for implementing animations faster and with less effort.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Dancing Shadows

The shadows in the fortress are like enigmatic dancers, moving to a rhythm only the bravest wizards can decipher. But fear not—you don’t need to become a dance master! With @keyframes, transform: translate, and a few magical timing functions, you can make the shadows dance at your command, as if guided by an invisible orchestra. Add some hover effects and let the movements repeat infinitely, turning the fortress into a stage for an eternal spectacle of illusions.

Your Task: Animate Your Elements

Create keyframes (@keyframes): Define an animation called shadowMove where the box moves 50px to the right from its starting position and then returns. Observe how the motion loops continuously.
Use a timing function (ease-in-out): Apply ease-in-out to make the animation start and end smoothly. Test how it affects the flow of the movement.
Set infinite repetition (infinite): Configure the animation to repeat infinitely. Watch as the box keeps moving in a never-ending cycle.
Integrate a hover effect: Create a hover effect where the box enlarges and slightly rotates when hovered over. Test how this effect interacts with and modifies the animation.
Add a delay (animation-delay): Introduce an animation-delay of 1 second to delay the start of the animation. Test how this impacts the overall timing of the motion.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

/* Keyframes for different animations */
@keyframes float {
    0% {
        transform: translateY(0);
    }

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

    100% {
        transform: translateY(0);
    }
}

@keyframes glow {

    0%,
    100% {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }

    50% {
        box-shadow: 0 8px 20px rgba(255, 255, 255, 0.6);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Apply animations */
.animated-box.float {
    animation-name: float;
}

.animated-box.glow {
    animation-name: glow;
}

.animated-box.spin {
    animation-name: spin;
}

/* Hover-Effect for the Boxes */
.animated-box:hover {
    transform: scale(1.1);
}

Let’s Keep Going