Home / Articles / The Benefits of Using CSS Animations

The Benefits of Using CSS Animations

  • Sample Chapter is provided courtesy of Adobe Press.
  • Date: Dec 4, 2014.

Chapter Description

Steven Bradley discusses the benefits of CSS animations vs. transitions in this chapter from CSS Animations and Transitions for the Modern Web.

Transition or Animation

One of the questions you might be asking yourself is when you should use a transition and when you should use an animation. You can create most of the examples in this and the previous chapter using either transitions or animations. So which should you choose when you want to animate something?

Similarities

You can start to answer that question by thinking about the similarities and differences of transitions and animations. One thing they both have in common is their properties. About half the animation-* properties have a counterpart transition-* property. The timing functions, for example, are the same, except for using the word animation or transition to start the property name.

Both can listen for changes to CSS property values and interact with JavaScript events. Triggering events like those in the following list can make changes in CSS property values that start either animations or transitions:

  • :hover
  • :link
  • :active
  • :visited
  • :focus
  • :checked
  • :disabled

You can also start transitions and animations through changes in media queries or class changes via simple JavaScript that changes the appropriate property values.

Differences

Let’s switch gears and think about the differences. Although both transitions and animations can run in response to a trigger, only animations can run automatically on page load. Transitions require a trigger to run. If you need your animation to run automatically, you have only one choice.

Transitions are limited to initial and final state keyframes. Animations can build as many intermediate keyframes as necessary or desired. This gives you more control over your animation and allows you to create more complex and sophisticated animations. Transitions are for simple animations.

Transitions don’t change properties. You set values up front in the CSS intrinsic to the specific elements. Transitions define the change only between property values and not the values themselves. Animations can change property values inside each keyframe. The values don’t need to be declared outside the animation either, making animation more dynamic.

Transitions can’t loop. They run once when triggered and then run in reverse when the trigger is removed. Otherwise they don’t run. You can loop animations as many times as you want and set them to run in reverse or alternate between forward and reverse. Once again CSS animations offer you more control than CSS transitions.

Once you start using JavaScript to further control your transitions and animations, it quickly becomes clear that transitions are easier to work with. It’s more difficult making changes to the values inside keyframes than it is the intrinsic values on elements.

As a general rule, you’ll write more code using CSS animations as opposed to CSS transitions, assuming both are trying to do the same thing.

When you get down to it, animations are abstractions of transitions. States are pulled out from the specific case to work in a more modular fashion. Transitions are a specific case of the more general animation. If you find yourself using the same transition code over and over, you might decide to rewrite it as an animation.

Choosing Transitions or Animations

If what you want to create is a simple animation between two states, keep your code simpler and lighter, or use JavaScript in the animation, then transitions are probably a better choice.

If what you want to create is going to be something more complex with a need for more than two states or if your animation needs to loop or run in either direction and start itself, animations are your choice.

In general, choose CSS transitions for simple animation that require less control, but better integration with JavaScript. Choose CSS animations for more complex and flexible animations that offer you greater control.

There’s one question in regard to transitions and animations you might still be wondering about: Does one perform better than the other? To answer that question, let’s look at performance.

Performance

The short answer is that you shouldn’t see any performance difference between transitions and animations, assuming both are doing the same thing in the same way. Performance has more to do with what properties are being changed as opposed to whether those changes happen through transitions or animations.

To render webpages, a browser first calculates the CSS styles that apply to the HTML elements. Then it lays out the page by working through the geometry and position for each element. Next comes painting where pixels are filled in before finally drawing everything to the screen on composite layers. Browsers use two different execution threads to do all these things and render webpages: the main thread and the compositor thread.

The main thread is responsible for laying out pages and painting elements. It computes the CSS styles applied to HTML elements, and it runs JavaScript. The compositor thread draws bitmaps to the screen via the graphic processing unit (GPU). It determines which parts of the page are visible or will soon be visible. It determines what’s likely to be scrolled to next and moves the parts of the page when someone does scroll. Both threads communicate with each other, sending and requesting information.

The main thread tends to be busier for longer periods of time, and while busy it’s not responsive to input. The compositor thread, on the other hand, tries to remain responsive because it has to be aware of scrolling.

Main thread responsibilities are more CPU intensive, while compositor responsibilities look to the GPU more frequently. GPUs can draw the same bitmaps over and over in different positions quickly. They can scale and rotate bitmaps quickly as well.

To create more performant animations, you generally want to stay away from layout and painting changes and instead make compositing changes. Compositing changes can be made on separate compositing layers, so the browser doesn’t need to repaint or rework the layout of other layers.

TABLE 4.1 lists CSS properties that affect layout and painting.

TABLE 4.1 CSS PROPERTIES

PROPERTIES THAT AFFECT LAYOUT

PROPERTIES THAT AFFECT PAINTING

width

color

height

border-style

padding

border-radius

margin

visibility

display

background

border-width

text-decoration

border

background-size

top

background-image

position

background-position

font-size

background-repeat

float

outline-color

text-align

outline

overflow-y

outline-style

font-weight

outline-width

overflow-y

box-shadow

left

right

font-family

line-height

vertical-align

clear

white-space

bottom

min-height

It turns out that there are currently five things browsers can animate cheaply in terms of performance: translation, scale, rotation, opacity, and some CSS filters. The first three should have you thinking back to transforms. Anything beyond animating these five types of properties probably won’t run as smooth.

Consider moving an element to a new location, which is something you’ve done a few times throughout this book. You can use a transform to move the element, or you can adjust properties like top and left. The former uses the GPU, while the latter uses the CPU. You want to take advantage of the GPU where possible and take advantage of the hardware acceleration it provides. If you think back to the first example in this chapter, you moved an element by adjusting its left value and then by applying a translation transform. The approach using translation ran smoother, and this is why.

It won’t matter whether you use CSS transitions or CSS animations when it comes to performance, but you should think about performance when creating either. Transforms, opacity, and some CSS filters don’t require layout or painting changes and so are preferred properties for animating.

This doesn’t mean you shouldn’t animate other properties. You can still create a smooth animation with other properties. Just realize that if you have the choice, you should opt for changing a transform, opacity, or CSS filter instead of another property.

Adobe Press Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Adobe Press 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 Adobe Press 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.adobepress.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