Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

This chapter is from the book

animation-* Properties

CSS animations offer eight different properties for controlling an animation. Some are comparable to similarly named transition-* properties, and some will be new.

animation-name Property

The animation-name property defines a comma-separated list of animations to apply to the given selector. It’s similar to the transition-property in that it ultimately defines the properties that are animated. With the transition-property, those properties are explicitly named. With the animation-name, an @keyframes rule is explicitly named, and that rule contains the properties that will be animated.

-webkit-animation-name: slide, drop;
        animation-name: slide, drop;

Each animation-name in the list should match a specific @keyframes rule.

@-webkit-keyframes slide {
   properties: values;
}

@keyframes slide {
   properties: values;
}

@-webkit-keyframes drop {
   properties: values;
}

@keyframes drop {
   properties: values;
}

If there’s no match in keyframe name (identifier), the animation won’t run. In addition to the identifier of an @keyframes rule, a value of none is also valid. When the none keyword value is used, no animation runs. You can use none to override an animation that’s inherited from a parent element.

-webkit-animation-name: none;
        animation-name: none;

@keyframes change the value of CSS properties. If multiple animations try to change the value of the same property on an element, the animation closest to the last name in the animation-name list controls the property values.

If multiple animation-names are listed and one is removed, it stops running, but the other listed animations continue.

Every listed animation-name should have a corresponding value for any other animation-* properties. If there are too many values in an animation-* property, any leftover values are ignored. If there aren’t enough values, the list of values will be repeated until there are enough to match.

Animations are applied to elements with an animation-name value that matches the name of an @keyframes rule. Once applied, the animation runs. It runs once the page loads unless it’s been applied to a trigger, such as :hover. Once started, an animation continues to run until it finishes or the animation-name value is removed, such as removing the :hover on the animating element.

An animation ends based on some combination of the animation-duration, animation-iteration-count, and animation-fill mode properties. You can also end an animation by setting the animated element’s display property to none. This also ends any animations running on descendant elements.

Changing the value of an animation element’s display property to something other than none immediately starts that animation. It also starts any animations applied to descendants of the parent element. Changing the value of display is one more way you can turn on and off an animation.

The values in each keyframe in an @keyframes rule are held as a snapshot when the animation starts. Changing the intrinsic property on an element with an animation running has no effect. The values in the animation are in control until the animation stops.

animation-duration Property

The animation-duration property defines how long an animation lasts during one cycle of the animation. It’s similar to the transition-duration property and takes a time value in seconds (s) or milliseconds (ms).

-webkit-animation-duration: 10s;
   animation-duration: 10s;

Like transition-duration, the default value is 0s, which is why elements don’t animate automatically even when they’re animatable. Technically, they are animating, but everything happens in an instant.

Note that animation-duration is the length of one full cycle of the animation. It’s not the length of each keyframe in the @keyframes rule. For example, if you set an animation-duration of 10s and have the following @keyframes rule

@Keyframes duration {

    0% {
          property: value;
    }

    50% {
          property: value;
    }

    100% {
          property: value;
    }
}

the animation will take 10 seconds to get from 0 percent to 100 percent, and not 10 seconds to go from 0 percent to 50 percent and then 10 seconds more from 50 percent to 100 percent.

Similarly, when an animation is set to loop multiple times, the animation-duration is the time it takes to complete one loop or cycle.

animation-timing-function Property

The animation-timing-function property describes an acceleration curve for each keyframe in a single animation cycle. It’s similar to the transition-timing-function. You can use any of the keyword timing functions or create one of your own.

animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: steps();
animation-timing-function: ease;
animation-timing-function: linear;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: cubic-bezier();

Note that the animation-timing-function applies between keyframes and not over the entire animation cycle. This means if you have keyframes at 0%, 50%, and 100% and an animation-timing-function of ease-in, the animation eases into each of the three keyframes in the @keyframes rule and not just once at the beginning of the animation.

Let’s try an example to see this more clearly (EXAMPLE 4.3).

  1. Add a div with a class of box to your HTML.

    <div class="box"></div>
  2. Give the .box class dimensions and a background-color.

    .box {
        width: 200px;
        height: 200px;
        background-color: #393;
    }
  3. Add an animation to the .box div using the individual animation-* properties.

    .box {
        -webkit-animation-name: slide;
                animation-name: slide;
    
        -webkit-animation-duration: 5s;
                animation-duration: 5s;
    
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in;
    }
  4. Finally add an @keyframes rule to your CSS.

    @-webkit-keyframes slide {
    
        0% {
            -webkit-transform: translate(0px, 0px);
                -ms-transform: translate(0px, 0px);
                    transform: translate(0px, 0px);
        }
    
        25% {
            -webkit-transform: translate(150px, 0px);
                -ms-transform: translate(150px, 0px);
                    transform: translate(150px, 0px);
        }
    
        50% {
            -webkit-transform: translate(300px, 0px);
                -ms-transform: translate(300px, 0px);
                    transform: translate(300px, 0px);
        }
    
        75% {
            -webkit-transform: translate(450px, 0px);
                -ms-transform: translate(450px, 0px);
                    transform: translate(450px, 0px);
        }
    
        100% {
            -webkit-transform: translate(600px, 0px);
                -ms-transform: translate(600px, 0px);
                    transform: translate(600px, 0px);
        }
    }
    
    @keyframes slide {
    
        0% {
            -webkit-transform: translate(0px, 0px);
                -ms-transform: translate(0px, 0px);
                    transform: translate(0px, 0px);
        }
    
        25% {
            -webkit-transform: translate(150px, 0px);
                -ms-transform: translate(150px, 0px);
                    transform: translate(150px, 0px);
        }
    
        50% {
            -webkit-transform: translate(300px, 0px);
                -ms-transform: translate(300px, 0px);
                    transform: translate(300px, 0px);
        }
    
        75% {
            -webkit-transform: translate(450px, 0px);
                -ms-transform: translate(450px, 0px);
                    transform: translate(450px, 0px);
        }
    
        100% {
            -webkit-transform: translate(600px, 0px);
                -ms-transform: translate(600px, 0px);
                    transform: translate(600px, 0px);
        }
    
    }

    This code adds five keyframes to the @keyframes rule. This should make it easier to see that the ease-in timing function is running between each keyframe and not once over the entire animation cycle.

  5. Load your page in a browser, and observe the timing curve between keyframes (FIGURE 4.4).

    FIGURE 4.4

    FIGURE 4.4 Animation timing functions

    You can override the timing function inside each of the keyframes. When a timing function is applied inside a keyframe, it’s instructing the animation to use that function moving from the keyframe with the timing function applied to the next one (EXAMPLE 4.4).

  6. Replace your @keyframes slide rule from Example 4.3 with the following rule. Changes in the code are highlighted.

    @-webkit-keyframes slide {
    
        0% {
            -webkit-transform: translate(0px, 0px);
                -ms-transform: translate(0px, 0px);
                    transform: translate(0px, 0px);
        }
    
        25% {
            -webkit-transform: translate(150px, 0px);
                -ms-transform: translate(150px, 0px);
                    transform: translate(150px, 0px);
            -webkit-animation-timing-function: linear;
                    animation-timing-function: linear;
        }
    
        50% {
            -webkit-transform: translate(300px, 0px);
                -ms-transform: translate(300px, 0px);
                    transform: translate(300px, 0px);
        }
    
        75% {
            -webkit-transform: translate(450px, 0px);
                -ms-transform: translate(450px, 0px);
                    transform: translate(450px, 0px);
    
            -webkit-animation-timing-function: linear;
                    animation-timing-function: linear;
    }
    
        100% {
            -webkit-transform: translate(100px, 0px);
                -ms-transform: translate(100px, 0px);
                    transform: translate(100px, 0px);
        }
    }
    
    @keyframes slide {
        0% {
            -webkit-transform: translate(0px, 0px);
                -ms-transform: translate(0px, 0px);
                    transform: translate(0px, 0px);
        }
    
        25% {
            -webkit-transform: translate(150px, 0px);
              -ms-transform: translate(150px, 0px);
                  transform: translate(150px, 0px);
    
            -webkit-animation-timing-function: linear;
                    animation-timing-function: linear;
        }
    
        50% {
            -webkit-transform: translate(300px, 0px);
                -ms-transform: translate(300px, 0px);
                    transform: translate(300px, 0px);
        }
    
        75% {
            -webkit-transform: translate(450px, 0px);
                -ms-transform: translate(450px, 0px);
                    transform: translate(450px, 0px);
    
            -webkit-animation-timing-function: linear;
                    animation-timing-function: linear;
        }
    
        100% {
            -webkit-transform: translate(100px, 0px);
                -ms-transform: translate(100px, 0px);
                    transform: translate(100px, 0px);
        }
    
    }

    In this code, you override the ease-in timing function on two of the keyframes.

  7. Reload your page, and observe the difference in the acceleration curve between keyframes (FIGURE 4.5).

    FIGURE 4.5

    FIGURE 4.5 Animation timing functions on keyframes

The way timing functions work over keyframes and the ability to override them on a specific keyframe is powerful and perhaps a bit scary. You have great control over how your animation accelerates, but you also have the responsibility to exercise that control. Having an animation ease in between every keyframe is probably not what you want.

animation-iteration-count Property

Transitions run once when triggered and run once in reverse when the trigger is removed. Animations can run as many times as you want. The animation-iteration-count property defines how many times an animation runs, and it takes as a value any number or the keyword infinite. The latter sets your animation to run in an endless loop.

-webkit-animation-iteration-count: 3;
        animation-iteration-count: 3;

-webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;

You’ve already seen the animation-iteration-count in action in Example 4.1, although that example used the animation shorthand to set all the values. Because you might be getting tired of sliding boxes and because the rest of the examples in this chapter are variations of that same sliding box, let’s do something different here (EXAMPLE 4.5).

  1. Start by adding a div with a class of box to your HTML.

    <div class="box"></div>
  2. Instead of giving dimensions and a background-color to the .box div, set the dimensions to 0px, and add a border with different colors for each side. Finally, give the border a radius of 50%.

    .box {
        width: 0px;
        height: 0px;
        border-width: 100px;
        border-style: solid;;
        border-color: #393 #933 #399 #993;
        border-radius: 50%;
    }
  3. Load your page.

    A circle appears with four pie wedges, each a different color.

  4. Add the following animation-* properties to .box. Note that you’ll be rotating the .box div this time instead of moving it.

    .box {
        -webkit-animation-name: rotate;
                animation-name: rotate;
    
        -webkit-animation-duration: 4s;
                animation-duration: 4s;
    
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
    
        -webkit-animation-iteration-count: 3;
                animation-iteration-count: 3;
    }
  5. Create the rotate @keyframes rules to rotate the .box div.

    @-webkit-keyframes rotate {
    
        0% {
            -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                    transform: rotate(0deg);
        }
    
        25% {
            -webkit-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                    transform: rotate(90deg);
        }
    
        50% {
            -webkit-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                    transform: rotate(180deg);
        }
    
        75% {
            -webkit-transform: rotate(270deg);
                -ms-transform: rotate(270deg);
                    transform: rotate(270deg);
        }
    
        100% {
            -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                    transform: rotate(360deg);
        }
    
    }
    
    @keyframes rotate {
    
        0% {
            -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                    transform: rotate(0deg);
        }
    
        25% {
            -webkit-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                    transform: rotate(90deg);
        }
    
        50% {
            -webkit-transform: rotate(180deg);
                -ms-transform: rotate(180deg);
                    transform: rotate(180deg);
        }
    
        75% {
            -webkit-transform: rotate(270deg);
                -ms-transform: rotate(270deg);
                    transform: rotate(270deg);
        }
    
        100% {
            -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                    transform: rotate(360deg);
        }
    
    }
  6. Load your code in a browser.

    The circular .box div rotates around its center.

    If you followed the colors in the example for the borders, the green wedge should start at the top. Each time the green wedge is back at the top is one iteration or one animation cycle (FIGURE 4.6).

    FIGURE 4.6

    FIGURE 4.6 Animation iteration count

animation-direction Property

Another new property is the animation-direction property, which defines whether an animation runs forward or in reverse on some or all of its cycles. The animation-direction property takes one of four values:

  • normal specifies that all iterations of the animation are played as specified.
  • reverse specifies that all iterations of the animation are played in the reverse direction as specified.
  • alternate causes the cycles to alternate between normal and reverse with normal for the first cycle and all odd iteration counts. Even counts are reversed.
  • alternate-reverse causes the cycles to alternate between normal and reverse with reverse for the first cycle and all odd iteration counts. Even counts are normal.

    -webkit-animation-direction: normal;
            animation-direction: normal;
    
    -webkit-animation-direction: alternate-reverse;
            animation-direction: alternate-reverse;

When the animation plays in reverse, the timing functions also run in reverse—for example, ease-in runs as ease-out.

Until now, the sliding box you’ve been working with slides to the right and then instantly returns to its initial location. The jump is more than a little jarring. The alternate and alternate-reverse values can remove the jump. Instead, the box continues to slide right and left until the animation stops.

Let’s go back to the sliding .box div you’ve used through most of this chapter (EXAMPLE 4.6).

  1. Start by adding a div with a class of box to your HTML.

    <div class="box"></div>
  2. Give the .box div dimensions and a background color.

    .box {
        width: 200px;
        height: 200px;
        background-color: #393;
    }
  3. Add the animation-* properties to .box. Additions to the code are highlighted.

    .box {
        -webkit-animation-name: slide;
                animation-name: slide;
    
        -webkit-animation-duration: 5s;
                animation-duration: 5s;
    
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
    
        -webkit-animation-iteration-count: 3;
                animation-iteration-count: 3;
    
        -webkit-animation-direction: reverse;
                animation-direction: reverse;
    }

    Notice the reverse direction.

  4. Create the slide keyframe.

    @-webkit-keyframes slide {
    
        to {
            -webkit-transform: translate(600px, 0px);
                -ms-transform: translate(600px, 0px);
                    transform: translate(600px, 0px);
        }
    
    }
    
    @keyframes slide {
    
        to {
            -webkit-transform: translate(600px, 0px);
                -ms-transform: translate(600px, 0px);
                    transform: translate(600px, 0px);
        }
    }
  5. Load your page.

    First it jumps 600 pixels to the right (so fast that you might not see the .box on the left before the jump), and then it slides back to its initial location and repeats the sequence three times.

  6. Change the value for the animation-direction in step 3 to alternate (EXAMPLE 4.7).

    -webkit-animation-direction: alternate;
            animation-direction: alternate;
  7. Reload your page, and observe the difference (FIGURE 4.7).

    FIGURE 4.7

    FIGURE 4.7 Animation direction

    Now the .box div slides back and forth between the initial and ending states. This makes for a much smoother overall animation. Experiment with the normal and alternate-reverse values.

animation-play-state Property

By default, your animations run as soon as the animation-name property is assigned. You can change that behavior with the animation-play-state property, which defines whether an animation is running or paused.

-webkit-animation-play-state: running;
        animation-play-state: running;

-webkit-animation-play-state: paused;
        animation-play-state: paused;

The default value, as you would likely guess, is running. If you change the value to paused, the animation stops where it is until the animation-play-state is changed again to running. When paused, the animation displays whatever state the animation was in at that moment. When the animation is resumed, it restarts from the state it was paused in.

Let’s make one addition to Example 4.7 (EXAMPLE 4.8).

  1. Add the animation-play-state property to the .box div from the previous example. Additions to the code are highlighted.

    .box {
        -webkit-animation-name: slide;
                animation-name: slide;
    
        -webkit-animation-duration: 5s;
                animation-duration: 5s;
    
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
    
        -webkit-animation-iteration-count: 3;
                animation-iteration-count: 3;
    
        -webkit-animation-direction: alternate;
                animation-direction: alternate;
    
        -webkit-animation-play-state: paused;
                animation-play-state: paused;
    }
  2. Reload your page.

    Unlike previous examples, this time the animation doesn’t run when the page is finished loading. To run the animation, you need to change animation-play-state to running and reload the page.

    This isn’t particularly useful if you have to reload the page after changing the animation-play-state property, but it becomes much more useful when changing properties via JavaScript or some other trigger.

    Let’s modify the example to add triggers.

  3. Modify your HTML to include play and pause buttons.

    <div class="container">
        <div class="box" id="box"></div>
        <button id="play">Play</button>
        <button id="pause">Pause</button>
    </div>

    The buttons get ids so your JavaScript code has something to hook into. Notice that the code adds an id of box to the .box div.

    The buttons need some styling.

  4. Add the following to your CSS:

    button {
        padding: 0.5em 1em;
        border: 1px solid #999;
        border-radius: 5%;
        margin-top: 3em;
    }

    Nothing special. Just a little style to make your buttons look “buttony.” Now let’s add some JavaScript so the buttons do something.

  5. Add the following code in the head of your document between <script></script> tags.

    <script>
    var init = function() {
    
        var box = document.getElementById('box');
        var play = document.getElementById('play');
        var pause = document.getElementById('pause');
        document.getElementById('play').addEventListener( 'click', function(){
            box.style.webkitAnimationPlayState = "running";
            box.style.animationPlayState = "running";
        }, false);
    
        document.getElementById('pause').addEventListener( 'click', function(){
            box.style.webkitAnimationPlayState = "paused";
            box.style.animationPlayState = "paused";
        }, false);
    
    };
    
    window.addEventListener('DOMContentLoaded', init, false);
    </script>

    Hopefully, the script looks somewhat familiar. The last line of code listens for the page to load and then calls the init function.

    Inside the function, you first get hooks to each button and the .box div and set them to appropriately named variables. Next you add event listeners to each button, and if a button is clicked, you set the value of animationPlayState to either running or paused, depending on which button was clicked.

  6. Reload your page one more time.

    You should see the new play and pause buttons. The green box sits in the top-left corner until you click the Play button to start the animation. Once the box begins moving, you can click the Pause button to stop the animation. Clicking Play starts the animation again from the point at which it was stopped.

animation-delay Property

The animation-delay property defines when an animation starts. It works the same way the transition-delay property works. Like transition-delay, values are in units of time and can be positive, 0, or negative.

-webkit-animation-delay: 2s;
        animation-delay: 2s;

-webkit-animation-delay: 0s;
        animation-delay: 0s;

-webkit-animation-delay: -2s;
        animation-delay: -2s;

A positive value delays the animation until some point in the future. A value of 0 (the default) starts the animation instantly. A negative value appears to start the animation in the past. It starts instantly, but at a point in the middle of the animation. The delay works as an offset.

Let’s continue to build on Example 4.8.

  1. Add an animation-delay to the .box div. Additions to the code are highlighted (EXAMPLE 4.9).

    .box {
        -webkit-animation-name: slide;
                animation-name: slide;
    
        -webkit-animation-duration: 5s;
                animation-duration: 5s;
    
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
    
        -webkit-animation-iteration-count: 3;
                animation-iteration-count: 3;
    
        -webkit-animation-direction: alternate;
                animation-direction: alternate;
    
        -webkit-animation-play-state: running;
                animation-play-state: running;
    
        -webkit-animation-delay: 2s;
                animation-delay: 2s;
    }
  2. Reload your page.

    The animation does nothing for 2 seconds and then slides back and forth like before (FIGURE 4.8). Try using some negative values, and observe the difference.

    FIGURE 4.8

    FIGURE 4.8 Animation delay

animation-fill-mode Property

You probably had an idea what each animation-* property did before I told you. Some were familiar after working through transitions, and the property names give a pretty good clue about what the others do.

The animation-fill-mode property is probably not intuitive to you. You might be thinking about background colors filling your element or something like that. The animation-fill-mode property actually defines what values are applied by an animation outside of its execution time.

By default, an animation affects property values only while it’s running. This is why the example animations you’ve been working with often jump back to the initial state when the animation stops. Whatever values are set in each keyframe are the ones used for a property until either the next keyframe changes it or the animation stops playing. When the animation stops, the CSS property values are whatever values were set intrinsically on the element.

The animation-fill-mode property overrides this behavior. It takes four keyword values.

animation-fill-mode: none | forwards | backwards | both
  • none is the default, and it doesn’t apply any property values in the animation outside the animation’s execution.
  • backwards applies the property values defined in the first keyframe that starts the first iteration to the period defined by animation-delay. The values come from either the 0% (from) or 100% (to) keyframes, depending on the value of the animation-direction property.
  • forwards applies the property values after the animation stops. If the animation-iteration-count value is greater than 0, the values applied are those at the end of the last completed iteration. If the count value equals 0, the values applied are those that start the first iteration.
  • both does what you might expect and applies both the forwards and backwards values to the animation-fill-mode property.

Once again let’s expand the example we’ve been working with.

  1. Add an animation-fill-mode to the .box div. Additions to the code are highlighted. Note that the iteration-count changes to 1 (EXAMPLE 4.10).

    .box {
        -webkit-animation-name: slide;
                animation-name: slide;
    
        -webkit-animation-duration: 5s;
                animation-duration: 5s;
    
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
    
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;
    
        -webkit-animation-direction: alternate;
                animation-direction: alternate;
    
        -webkit-animation-play-state: running;
                animation-play-state: running;
    
        -webkit-animation-delay: 2s;
                animation-delay: 2s;
    
        -webkit-animation-fill-mode: forwards;
                animation-fill-mode: forwards;
    }
  2. Load the page in a browser.

    As before, the green box slides to the right when the animation begins. However, now when it stops it doesn’t jump back to its initial state. Setting the animation-fill-mode to forwards allows the .box div to hold the final state in the animation after the animation completes (FIGURE 4.9).

    FIGURE 4.9

    FIGURE 4.9 Animation fill mode

    Experiment with the different animation-fill-mode values to observe what each does. Change some of the other animation-* property values in combination with the animation-fill-mode property as well.

    For example, use either of the reverse values on the animation-direction and then use forwards on the animation-fill-mode.

    animation-direction: alternate-reverse;
    animation-fill-mode: backwards;

    Or add a 0% (or from) keyframe in the @keyframes rule so the .box begins the animation in a different location.

    0% {
        -webkit-transform: translate(75px, 0px);
            -ms-transform: translate(75px, 0px);
                transform: translate(75px, 0px);
    }

Make sure there’s a positive animation-delay, and set animation-fill-mode to backwards.

animation-fill-mode: backwards;

For both changes, observe where the .box div is located before and after the animation as well as during the animation-delay.

animation Shorthand Property

You can also use the animation shorthand property to set everything at once. You saw this in the first example in this chapter.

animation: animation-property animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

If you replace each of the properties with a value, you get something like this:

animation: slide 2s ease 0.5s 2 reverse both running;

To add multiple animations, you separate each definition with a comma like this:

animation: slide 2s ease 0.5s 2 reverse both running, bounce 5s ease-in-out 0 3 alternate forwards paused;

Note that the comma occurs between the full definition for each animation. There are two definitions in this line of code, so a single comma between them is all you need.

As with transitions, order is important. Just as with the transition shorthand, the first time value is assigned to the animation-duration property, and the second time value is assigned to the animation-delay property.

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020