HTML & CSS

Animation Advice from a CSS Master

Angela Molina, Tiffany Brown
Share

Just over a week ago we were lucky enough to have Tiffany Brown join us on the SitePoint forums for her live Q&A on CSS Animations.

I think it’s fair to say that with over 2,200 views, it was pretty successful! In case you missed it, I’ve compiled the highlights from the event for your reading pleasure.

Tiffany is a freelance developer based in Los Angeles. She’s the author of CSS Master and co-author of Jump Start HTML5. Before becoming a freelance developer, she was part of the Opera Developer Relations team and has worked in small agencies within Atlanta. Tiffany now spends her days educating the world in web development through her written books, blog, and articles.

Getting Started

Q: I am an instructor at a community college. I have been asked to research and lay out a web development AAS (2-year degree) for web development. There are so many things to choose from, that I am overwhelmed when trying to lay out the curriculum. Any advice on a path for students to learn Web Development? I thought:

  • HTML/CSS
  • JavaScript/jQuery
  • SQL

The main problems are which tools to use, frameworks, CMS, etc?

Kelle (staff): Hi Suzy, I can only really offer advice on the front-end side of things but I would think that basic HTML and CSS are an excellent place to start. With JavaScript, I think it’s always better to learn vanilla JavaScript first, and then introduce libraries so that students understand the difference between a language feature and library functionality.

Also helpful is pointing them towards the right resources, MDN is a great API reference I wish I’d had when I started out, for example.

Tiffany: I think that’s a good path. HTML and CSS. I’d say teach JavaScript fundamentals rather than jQuery (or teach jQuery as part of JavaScript). SQL is still widely used, so that’s a good addition. I’d also add a server-side programming language:

  1. Ruby and its Rails framework,
  2. Python and Django, and/or
  3. PHP + the Laravel framework.

It’s also helpful to teach basic server configuration: Nginx or Apache. Roll a version management tool into the curriculum, ideally as part of a class on something else.

Q: Thank you so much. Vanilla JavaScript is a fantastic idea. How do you feel about Angular, Ember and Backbone?

Kelle (staff): Ember and Backbone are tricky because they require a pretty decent JS background to use them well, in my opinion.

Angular is quite good for beginners, especially if they’ve taken the time to understand the fundamentals of the language beforehand. One of the good things about Angular (or bad depending on your perspective, but good for learning purposes), is that it comes bundled with a bunch of helpful things that ease people into some of the more important ideas in modern front-end development.

At SitePoint we use React almost exclusively, so I’m pretty biased about view frameworks; it’s definitely a steeper learning curve however!

Guest: Fantastic Advice. I am so grateful. Thank you for responding. Do you have a recommendation for a version management tool?

Tiffany: I’d recommend Git or Mercurial. SVN is another option, but it isn’t a pleasant one. There are services that offer one or more of them, and students can sometimes get free plans. Do a Google/DuckDuckGo search for hosted Git or hosted Mercurial and you’ll find a bunch.

Q: This is one of those topics that you always want to dive into but you never get the time to do it. I always found that animations were a bit tricky and hard to learn so I always gave up. But hey! Maybe my impressions are wrong and they’re not that tricky after all. CSS animations have greatly improved but most of the ones I’ve seen still include bits and pieces of JS (jQuery most of the time), so it looks to me that if you want to learn one, you have to learn the other.

Tiffany: You can definitely write CSS animations or transitions that work independently of JavaScript. Animations and transitions can be triggered by :hover, :focus, or :checked states. In many cases, however, you’ll need to add or remove a class name in order to trigger an animation/transition. So, yes, you’ll need to learn at least a little bit of JavaScript (but just a little bit).

Library Recommendations

Q: What CSS animation libraries do you recommend? I use Animate.css

Tiffany: Animate.css is the best-known, and furthest along, so that’s what I recommend. I am keeping an eye on Effekt.css though. It’s part of the HTML5 Boilerplate project. In my projects though, transitions have generally been enough.

Q: Hi, would you recommend using Hover.css? Or why not?

Tiffany: Hover.css is a library that I haven’t looked at closely enough to have an opinion about. It’s good that each item is self-contained. It let’s you cherry pick which parts to use and it has some clever animations too. I’m neither for nor against it.

Animation Performance

Q: Would you recommend just using animation on desktop computers or on mobile? If on mobile what are the big issues to be aware of?

Tiffany: You can use animation on any device with a browser that supports it. If the device has a slower processor, you could conceivably run into some issues. But that’s something that (hopefully) you’ll discover during testing.

Now, if your audience includes a lot of Opera Mini users, do make sure that your animations and transitions use a fallback. Opera Mini doesn’t support transitions or animation of any kind, whether CSS or JavaScript.

Q: What is your performance advice/concern when we use animations? What to use with care, what to avoid?

Tiffany:

Avoid reflows wherever possible

A reflow occurs when the dimensions of an object change, or its position changes. So instead of animating top, right, bottom, and left; use transform and the translate functions. Margins and borders are other properties that can cause a reflow. I haven’t tested this, but I suspect that animating outline might be a good way to work around that.

Animating the width and height properties of an object (including the min-/max-properties in there) can also trigger a reflow. Sometimes you have to, though; using transform: scaleX() or transform: scaleY() isn’t always a good alternative to width and height.

Q: I am wondering if there is a practical limit, size, or number, to using elements in animations.

Tiffany: As with anything web related, however, the more elements you affect, the slower your page can potentially become. But I don’t know of any hard browser-based limits on how many elements can be animated at once. There is, however, an accessibility concern for people with seizure or vestibular disorders. You want to be careful of animating too many items at once. You also want to be careful not to create animations that take over an entire screen. WCAG2.0 has some guidelines for users with seizures that are helpful.

Q: From what I’ve seen so far, animations, transitions, and transforms are used for “enhancement” and I’ve not noticed any use where if they broke for whatever reason UX would be affected. I assume the same type of rule as “don’t use images without some form of alternate text to convey the same message” applies.

Do you know of any potential problems in this regard?

Tiffany: Yes! There’s a pretty significant difference in how transitions work versus CSS animations. If the user’s browser doesn’t support CSS animations, the animation will completely fail. You’ll need to use a JavaScript fallback. Transitions, on the other hand, will simply jump between the start and end states. The browser will ignore the transition-related properties. It’s not a pretty switch, but the UX won’t break.

Transitions and animations also need values that can be interpolated. You may have run into a situation of animating to or from height: auto, and found that it doesn’t work. That’s because the start and end values for a property need to be numeric, so that the browser can figure out the values in between.
I’d also recommend that you don’t tie a mission-critical action like an Ajax form submission to the transitionEnd or animationEnd events. A user interaction can prevent those events from being triggered.

Q: What kind of animation performs better with JavaScript?

Q: I’m interested in the same. Having accepted that “CSS is for style” it seemed wrong when I first saw CSS doing things that I would normally use JavaScript to do. Now I wonder if the newer CSS is more “for those that don’t know JavaScript” or if there are real advantages to be had?

Tiffany: Here’s where we run into the upper limits of my knowledge. I think it depends on the browser. To my knowledge it’s pretty much a draw. Position, dimension, or margin operations are pretty slow either way.

The disadvantage of JavaScript is that JavaScript animations take place on the same thread as all of your other JS. You’re potentially affecting the performance and responsiveness of your UI.

By using CSS, you’re freeing up the JavaScript engine. And in some browsers, you’ll get the advantage of GPU processing.

Now with SVG, you don’t always have a choice. You should use SMIL, but SMIL isn’t supported in IE or Edge, and it’s deprecated in Chrome. So it’s easier to use JavaScript if you want to animate the shape of a path.

Paul (Guest): I believe the CSS animations are much smoother than JS animations, especially the jQuery animations which are very jumpy. Of course in some cases you may need a bit of JS to trigger the CSS effect when needed.

Q: You said jQuery animations are jumpy but what about using something like velocity.js vs CSS animations? The information on velocity.js says that it performs better on mobile than CSS animations.

Paul (Guest): Yes I use velocity.js for animated menus on mobile and it is a lot smoother than jQuery. I suppose it depends on what you are doing but sometimes all you need to do in JS is add a class to the element and let the CSS animate it rather than making the JS animate the element also. (Mind you I’m pretty rubbish at JS anyway.)

Tiffany: By using CSS for animation and transitions, you’re moving those tasks from the JavaScript thread to the graphics processing thread. When using JavaScript for animation, you run the risk of other JS operations being held up until the animation completes. With CSS, the JavaScript portion of your pages remain available. If you want to detect when an animation/transition is complete, you can do it asynchronously using the transitionEnd or animationEnd events.

Something else that I appreciate about using CSS animations is that you can combine them with media queries. An object may slide horizontally across a wide screen, but flip over on small ones (or something). And if the user has JavaScript blocked, animations will still work (apart from the event handling, of course).

Animation Tips

Q: Hi @webinista! I was wondering if you have any tips or rules for smooth, performant animations? Is there anything we should stay away from animating?

Tiffany: Yes! I ran into this issue recently too. Be careful of animating properties that change the dimensions of or position of objects on your page (also known as causing a reflow). These can be especially slow, depending on the browser.

  1. top
  2. left
  3. right
  4. bottom
  5. margin-*

Instead use the transform property and the translate(), translateX(), and translateY() functions. @PaulOB answered this question well.

I’ve also run into issues with the filter property and the blur() function. Gaussian blurs are kind of expensive to calculate. So I’d say avoid animating/transitioning that for now.

Paul (Guest): Use translate to move things rather than absolute positioning as it is more performant.

Q: What was the last trick regarding animations or transitions that you considered very useful or tricky? For example mine was one regarding animation-delay – if I want multiple animations to start from the beginning of page load I’ll give negative values so I could keep the delay between them. Thanks!

Tiffany: Ooh. This is a good one.

While working on the book, I dug into the cubic-bezier function. It’s super interesting to me because it involves a level of math that I love and fear at the same time.

I wish I could sum up how it works off the top of my head. But the short version is that when the 2nd and 4th values are greater/less than 1, it will create an “overshoot” or “back-up” effect. You can see what I mean here.

Animation on Sites

Q: Right now, I see very many people talking about animation and its possibilities, but beyond what appear to be very impressive test pieces, Chris Gannon’s Lava Lamp for example. I’m not entirely sure where they fit in the lexicon of web design. How do you anticipate they will be used on a business website (for example) and do you have any examples you can point at?

Tiffany: We’re starting to see animations and transitions on business websites. MailChimp has one of my favorite examples. After you schedule an e-mail, there’s an animated SVG of a chimp holding up “metal fingers” encouraging you to “Rock on.” Unfortunately, it’s only visible to logged-in customers.

I do think you’ll see animation – and I’m including transitions – used to add that sort of whimsy. You can do clever loading animations and hover effects. Say, revealing an entire object on hover by animating the clip-path property. McDonald’s may animate their arches logo. I think you’ll also see animated charts in combination with SVG.

That’s a wrap!

How are those for words of wisdom? Tiffany had spent an extra 1.5 hours on the forums with us discussing CSS animations. If you’re only reading this discussion here, then I’d say it’s safe to assume you missed the event. However there’s no need to feel that you missed out, because you can still read the whole discussion and continue to take part. Better yet, start your own forum discussion.