Animating a CSS Background Gradient

Topics Covered in This Mobile & Responsive Web Design Tutorial:

Creating CSS Animations with @keyframes, Implementing Animation Properties, and Optimizing for Cross-Browser Compatibility

Exercise Preview

Exercise Overview

CSS3 animations have revolutionized how we create engaging web experiences without relying on heavy JavaScript libraries. While CSS animations may not match the complexity of JavaScript-based solutions, they excel at smooth, performant transitions and property changes over time. In modern web development, CSS animations are essential for creating polished user interfaces that feel responsive and professional.

In this hands-on exercise, you'll master the fundamentals of CSS animation by creating a dynamic background effect that moves gradient stripes. This technique is widely used in contemporary web design for drawing attention to key content areas, creating loading indicators, and adding subtle motion that enhances user engagement without overwhelming the interface.

Animating a CSS Gradient

Let's dive into the core mechanics of CSS animation. Every CSS animation consists of two essential components: the animation property applied to your target element, and the @keyframes rule that defines the animation sequence. Understanding this relationship is crucial for creating sophisticated animations.

1. We'll be working with the Jive Animation folder. Open that folder in your code editor if it allows you to (modern editors like VS Code, Sublime Text, or WebStorm all support this workflow).
2. Preview index.html in a browser to see our starting point.
3. Resize the window so it's 480px or wider to view the responsive layout properly.

4. Notice the page's striped background pattern. This CSS gradient was created using modern gradient techniques that we covered in previous exercises. Now we'll bring it to life with animation!

   CSS animations operate on a two-part system: the animation property that you assign to elements you want to animate, and the @keyframes rule that defines the animation sequence. Think of @keyframes as a timeline where you specify exactly how properties should change over time.

   The @keyframes rule allows you to name your animation and create a series of keyframes that define the start (from) and end (to) points of any CSS property transition. Here's a simple example that fades an element into view:

   @keyframes NAME-YOUR-ANIMATION {
      from  { opacity: 0; }
      to    { opacity: 1; }
   }

   For more precise control, keyframes can be specified using percentage values, allowing you to create complex multi-stage animations:

   @keyframes NAME-YOUR-ANIMATION {
      0%    { opacity: 0; }
      100%  { opacity: 1; }
   }

   This percentage-based approach is particularly powerful because you can add intermediate keyframes (25%, 50%, 75%) to create sophisticated animation sequences.

5. Switch to your code editor and open main.css (located in the css folder).
6. Locate line 13 and find the html rule that contains our gradient styles.

7. Below the html rule, add the following code to define our animation framework:

   @keyframes bg-animation { 
   
   }

8. To create the moving stripe effect, we'll animate the background-position property. This technique shifts the background image coordinates, creating the illusion of movement. Add the following keyframe definitions:

   @keyframes bg-animation { 
      0%   { background-position: 0; }
      100% { background-position: 0 198px; }
   }

   Technical Note: The 0% keyframe represents the animation's starting state, while 100% defines the end state. The background-position values (0 and 0 198px) control the horizontal and vertical positioning of our striped gradient.

9. Now we need to connect our animation to an element and specify timing parameters. Since our gradient is applied to the html rule, we'll add the animation property there. Add the following code shown in bold:

   html {

   Code Omitted To Save Space

   background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(0,0,0,.3) 35px, rgba(0,0,0,.3) 70px);
      animation: bg-animation 10s infinite;
   }

   Animation Property Breakdown: The animation shorthand includes the animation name (bg-animation), duration (10s), and iteration count (infinite for continuous looping). This creates a smooth, perpetual motion effect.

10. Save the file and prepare to see your animation in action.
11. Preview index.html in Chrome. You should see the background stripes moving smoothly across the page—congratulations, you've created your first CSS animation!

12. Observe the animation for a complete 10-second cycle. You'll notice the animation slows down at the end, stops briefly, then accelerates as it restarts.

    This behavior is caused by the default easing function, which creates natural-looking motion by varying the animation speed throughout its duration. While easing works well for many animations (like button hovers or modal entrances), our moving stripes need consistent motion for the best visual effect.

13. Return to main.css in your code editor to adjust the animation timing.

14. Modify the animation property to include a linear timing function:

    html {

    Code Omitted To Save Space

    animation: bg-animation 10s linear infinite;
    }

    The linear timing function ensures constant velocity throughout the animation cycle, eliminating the speed variations.

15. Save the file and test your improvement.

16. Refresh index.html in Chrome and observe these improvements:

    • The background stripes now maintain constant velocity throughout the animation cycle.
    • However, you may notice an alignment issue near the top of the page where stripe patterns don't match up perfectly. This visual artifact occurs because the background repeat pattern doesn't align with our animation distance.
17. Switch back to main.css to address the alignment issue.

18. Add a background-size property to control the repeat pattern precisely:

    html {

    Code Omitted To Save Space

    animation: bg-animation 10s linear infinite;
       background-size: 198px;
    }

    Pro Tip: The 198px value was determined using Chrome's DevTools. When creating animations, always use browser developer tools to experiment with values in real-time before committing them to your CSS.

19. Save the file and verify the fix.
20. Preview index.html in Chrome and confirm:
    • The stripe alignment issue is resolved—no more visual seams or mismatched patterns.
    • Note the current direction of movement. We'll reverse this direction next to create a more visually appealing effect.

21. Keep the browser page open for comparison as we make the final directional adjustment.

Reversing the Direction of the Animation

Animation direction can significantly impact user perception and visual hierarchy. By reversing our stripe movement, we can create a more engaging effect that draws the eye in a specific direction.

1. Return to main.css in your code editor.

2. To reverse the animation direction, we simply change the positive background-position value to negative. This technique works because we're moving the background in the opposite direction along the coordinate system:

   @keyframes bg-animation { 
      0%   { background-position: 0; }
      100% { background-position: 0 -198px; }
   }

3. Save the file to apply the change.

4. Switch to Chrome and observe the current animation direction, then refresh the page to see the reversed motion. This subtle change can significantly improve the visual flow of your design.

Moving the Animation to the Happy Hour Section

While full-page background animations can be eye-catching, they often negatively impact performance and can be distracting for users trying to consume content. Modern web design principles favor targeted animations that serve specific purposes—like highlighting important sections or guiding user attention.

Let's refactor our animation to focus attention on the Jive at Five happy hour section. This approach demonstrates a key principle of effective web animation: using motion strategically to enhance rather than overwhelm the user experience.

1. Switch back to main.css in your code editor.
2. In the html rule, locate and copy these three property lines:
   • background-image (the gradient definition)
   • animation (our animation reference)
   • background-size (the pattern sizing)
3. Delete the animation and background-size lines from the html rule, but leave the background-image if you want to maintain the static gradient.
4. Navigate to the .happy-hour.module rule around line 164.

5. Paste the copied properties at the end of the rule:

   .happy-hour.module {
      background: rgba(116,58,1, 0.5);
      text-align: center;
      background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(0,0,0,.3) 35px, rgba(0,0,0,.3) 70px);
      animation: bg-animation 10s linear infinite;
      background-size: 198px;
   }

   This approach layers the animated gradient over the existing background color, creating a rich visual effect that draws attention to this important content section.

6. Save the file and test the targeted animation.

7. Preview index.html in Chrome. Notice how the Jive at Five happy hour section (positioned in the lower left of the desktop layout) now features the animated stripes while the rest of the page remains static. This focused approach is much more effective for user experience and performance.

Supporting Older Webkit Browsers

Cross-browser compatibility remains crucial in professional web development, even as of 2026. While modern browsers have excellent CSS animation support, some users—particularly in enterprise environments or developing markets—may still use browsers with older rendering engines that require vendor prefixes.

The WebKit prefix (-webkit-) is still necessary for some older mobile browsers and certain enterprise browser configurations. Always check current compatibility data at caniuse.com when implementing new CSS features in production environments.

1. Switch back to main.css in your code editor.
2. Locate and copy the entire @keyframes bg-animation rule (around line 21).
3. Paste a duplicate copy directly above the existing keyframes rule.

4. Add the WebKit prefix to the first copy:

   @-webkit-keyframes bg-animation { 
      0%   { background-position: 0; }
      100% { background-position: 0 -198px; }
   }
   
   @keyframes bg-animation { 
      0%   { background-position: 0; }
      100% { background-position: 0 -198px; }
   }

   Best Practice: Always place vendor-prefixed versions before the standard property. This ensures that browsers use the standard version when available while falling back to prefixed versions when necessary.

5. Find the .happy-hour.module rule around line 168.

6. Duplicate the animation property line:

   .happy-hour.module {

   Code Omitted To Save Space

   animation: bg-animation 10s linear infinite;
      animation: bg-animation 10s linear infinite;
      background-size: 198px;
   }

7. Add the WebKit prefix to the first animation line:

   .happy-hour.module {

   Code Omitted To Save Space

   -webkit-animation: bg-animation 10s linear infinite;
      animation: bg-animation 10s linear infinite;
      background-size: 198px;
   }

8. Save the file to complete your cross-browser animation implementation.

9. Congratulations! Your animation is now fully functional across a wide range of browsers. While you won't see visual changes in modern Chrome, this code ensures your animation works reliably across different browser environments.

   Code Organization Tip: For maintainability, consider moving your @keyframes rules near the CSS rules that use them. This keeps related code together and makes future updates easier. The animation will function regardless of where the keyframes are defined in your stylesheet.