CodeWithAbdessamad

Animations

Animations

In this section, we explore CSS animations—the powerful mechanism for creating smooth, controlled motion in your interfaces. Animations build upon transitions (covered in the previous chapter) but offer greater flexibility and precision for complex sequences. We’ll start with the foundation: @keyframes, then dive into how to control those animations using the animation properties. Ready to make your designs come alive? 🎨

@keyframes

@keyframes is the core building block of CSS animations. It defines a set of keyframes—specific points in time where your element’s styling changes. Think of it as a motion blueprint that tells the browser: “Here’s how the element should look at 0%, 50%, and 100% of the animation timeline.”

Here’s why it matters:

  • No JavaScript needed—all animation logic is pure CSS
  • Precise timing—control exactly when styles change
  • Reusable—keyframes can be shared across multiple animations

Let’s walk through a simple example: a button that fades in when hovered. This demonstrates the essence of keyframes without overwhelming complexity.

<code class="language-css">/<em> Fade-in animation for buttons </em>/
<p>@keyframes fadeIn {</p>
<p>  from { opacity: 0; transform: scale(0.9); }</p>
<p>  to { opacity: 1; transform: scale(1); }</p>
<p>}</code>

Key concepts to note:

  • from = 0% (start)
  • to = 100% (end)
  • opacity and transform are style properties that change over time
  • You can add intermediate keyframes for complex motion (e.g., 50% { opacity: 0.5; })

Real-world example: A bouncing ball

Let’s create a bouncing ball with three keyframes to show progression:

<code class="language-css">/<em> Ball animation </em>/
<p>@keyframes bounce {</p>
<p>  0% { transform: translateX(0); opacity: 1; }</p>
<p>  25% { transform: translateX(10px); opacity: 0.8; }</p>
<p>  50% { transform: translateX(0); opacity: 0.5; }</p>
<p>  75% { transform: translateX(-10px); opacity: 0.2; }</p>
<p>  100% { transform: translateX(0); opacity: 1; }</p>
<p>}</code>

This animation demonstrates:

  • Non-linear motion (bounces up/down)
  • Opacity transitions (fade in/out)
  • Precision (exact timing percentages)

💡 Pro tip: Use 0%, 100% for start/end states, and intermediate percentages for intermediate states. For complex motions, break your animation into 5–10 keyframes to avoid browser performance issues.

Animation Properties

Now that we have our @keyframes definition, we need animation properties to trigger and control the animation. These properties tell the browser: “When to start, how long, and how to behave.”

Here’s the full set of animation properties with practical usage:

Property Description Example Value
animation All-in-one shorthand for animation properties (saves time) animation: bounce 1s ease-in-out 0s 1 normal forwards;
animation-name Name of the @keyframes rule to use bounce (from above)
animation-duration Total time for one animation cycle (in seconds) 1s
animation-timing-function How the animation progresses over time (e.g., smooth, abrupt) ease-in-out
animation-delay Time to wait before animation starts (in seconds) 0s
animation-iteration-count How many times to run the animation (e.g., infinite) infinite
animation-direction Direction of the animation (e.g., forward, backward) alternate
animation-fill-mode When to apply styles outside the animation (e.g., at start/end) forwards
animation-play-state Pause/play state (e.g., paused vs running) paused

How to apply animations (with concrete examples)

Example 1: Simple fade-in button

We’ll create a button that fades in on hover using animation shorthand:

<code class="language-css">.button {
<p>  opacity: 0;</p>
<p>  animation: fadeIn 0.5s ease-in forwards;</p>
<p>}</p>
<p>@keyframes fadeIn {</p>
<p>  from { opacity: 0; }</p>
<p>  to { opacity: 1; }</p>
<p>}</code>

Why this works:

  • animation: fadeIn 0.5s ease-in forwards = shorthand for animation-name, duration, timing-function, fill-mode
  • forwards = keeps the final state after animation ends (critical for hover effects)
  • No JavaScript—pure CSS magic!

Example 2: Infinite bouncing ball

Let’s make the ball bounce continuously with animation-iteration-count: infinite:

<code class="language-css">.ball {
<p>  animation: bounce 1.5s ease-in-out infinite;</p>
<p>}</code>

Key differences:

  • infinite = runs forever (vs 1 for one cycle)
  • ease-in-out = smooth acceleration/deceleration (better UX than linear)

Common pitfalls and fixes

  1. Animation doesn’t start → Check animation-delay (if set to >0s, animation waits)
  2. Animation jumps → Use animation-fill-mode: forwards to keep final state
  3. Performance issues → Limit keyframes to 5–10 (beyond 20 causes browser lag)

💡 Pro tip: Always use forwards (or backwards) for end states—this ensures your animation stays in the final state after completion. For hover effects, this is non-negotiable.

Summary

CSS animations—powered by @keyframes and animation properties—let you create smooth, precise motion without JavaScript. Start with simple keyframes (like fadeIn), then control timing with properties such as animation-duration and animation-timing-function. Remember: keep keyframes minimal (5–10), use forwards for end states, and always test in real browsers. With these fundamentals, you’ll craft animations that feel natural and performant. 🚀