Animating a CSS Background Gradient

Topics covered in this Mobile & Responsive Web Design tutorial:

Creating a CSS animation, Specifying which element will use the animation

Exercise Preview

Exercise Overview

Using CSS3, we can create simple animations. While CSS animations are not as powerful as JavaScript, they are great for changing almost any CSS property over time. In this exercise, you’ll learn how to create a CSS animation that moves a background image.

Animating a CSS Gradient

1. We’ll be working with the Jive Animation folder. Open that folder in your code editor if it allows you to (like Sublime Text does).
2. Preview index.html in a browser.
3. Resize the window so it’s 480px or wider.

4. Notice the page’s striped background. That’s a CSS gradient, which we showed how to create in a previous exercise. Let’s animate it!

   CSS animations consist of two parts: the animation property that you assign to the element you wish to animate and the @keyframes rule. Let’s start with @keyframes.

   You use @keyframes to name the animation and build a series of keyframes that sets the start (from) and end (to) points of an element’s CSS transition. For example, the following code could be used to fade an element into view:

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

   Keyframes can also be specified by a percentage value, for example:

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

5. Let’s give this a try. Switch to your code editor and open main.css (in the css folder).
6. On line 13, find the html rule.

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

   @keyframes bg-animation { 
   
   }
   

8. We want the stripes to move, so we’ll change the background position. We only need two keyframes: the start and end positions of the background. Add the following code to define what will be animated:

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

   NOTE: 0% is the start of the animation. 100% is the end of the animation.

9. Now that we have an animation, we need to specify what element (or elements) will use it and how long it will take to animate. The html rule has the gradient we want to animate, so 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;
   }
   

   NOTE: We want the animation to be continuous, so we set looping to infinite. The 10s means a 10 second duration.

10. Save the file.
11. Preview index.html in Chrome. The background stripes are on the move!

12. Wait for the 10 seconds for the animation to finish. Notice that it slows down, stops, then starts up again.

    By default the animation has easing. Easing is when an animation speeds up or slows down (goes easier) at certain points in the animation. Easing is great for some animations, but we want a constant rate of motion.

13. Switch back to main.css in your code editor.
    

14. In the html rule, add the following code shown in bold:

    html {

    Code Omitted To Save Space

       animation: bg-animation 10s linear infinite;
    }
    

15. Save the file.

16. Preview index.html in Chrome and notice the following:

    • The background stripes now move at a constant rate.
    • As you watch the animation, notice that near the top of the page there’s an unsightly seam where the stripes are offset. We’re going to have to define the size of our repeating background to fix this.
17. Switch back to main.css in your code editor.

18. In the html rule, add the following code shown in bold:

    html {

    Code Omitted To Save Space

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

    NOTE: We arrived at this size through experimentation in Chrome’s DevTools.

19. Save the file.
20. Preview index.html in Chrome and:
    • Notice the striped background no longer has the mismatched seam near the top of the page.
    • Take note of the direction of the animation. We want to make it move in the opposite direction.

21. Keep the page open in Chrome, and switch back to your code editor.

Reversing the Direction of the Animation

1. Switch back to main.css in your code editor.

2. To reverse the animation we can change from the positive value to a negative value. Change 198 to -198 as shown below:

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

3. Save the file.

4. Switch back to Chrome, notice the direction of the animation, then reload the page to see it change direction.

Moving the Animation to the Happy Hour Section

Animating the background of the entire page is distracting (and sluggish on some devices). Instead, let’s use this animation to bring attention to the Jive at Five happy hour section. The animation is already named and defined, so the only thing we have to do is add a gradient to the happy hour section (it currently does not have one) and tell it to use the animation.

1. Switch back to main.css in your code editor.
2. In the html rule, select and copy the following three lines of code:
   • background-image
   • animation
   • background-size
3. Delete the animation and background-size lines of code from the html rule.
4. Find the .happy-hour.module rule around line 164.

5. Paste the code at the end of the rule, as shown below in bold:

   .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 198px;
   }
   

6. Save the file.

7. Preview index.html in Chrome. Notice the Jive at Five happy hour section (towards the lower left of the desktop layout) is now animating instead of the page’s background!

Supporting Older Webkit Browsers

The code we added works in many modern browsers, but some users may be using browsers with an older version of the webkit rendering engine. To support those browsers we can add a vendor prefixed version of the animation. To see which browsers/versions require the vendor prefix, refer to caniuse.com

1. Switch back to main.css in your code editor.
2. Copy the entire @keyframes bg-animation rule (around line 21).
3. Paste another copy above the current one.
4. In the first copy, add -webkit- as shown below in bold:
   

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

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

6. Duplicate the animation line of code, as shown below in bold:

   .happy-hour.module {

   Code Omitted To Save Space

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

7. Add -webkit- to the first line, as shown below in bold:

   .happy-hour.module {

   Code Omitted To Save Space

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

8. Save the file.

9. That completes your animation! You won’t see anything change in Chrome, but this animation will now work in more browsers.

   If you want, you can move the @keyframes animation rules down so they are directly above or below the .happy-hour.module (to keep the code easier to update). That’s optional though, as the page will work regardless of where those animations are defined.