[AMA] Animating with CSS with CSSAnimation.rocks Creator Donovan Hutchinson

What do you need to know to kick start your CSS animation skills?

Did you know that by adding animation to your site, you’re not only creating impressive effects but also add a new layer of engagement through subtle transitions and micro-interactions — ultimately improving UX and user engagement.

This Wednesday (8th February) we are thrilled to have Donovan Hutchinson from CSSAnimation.rock, take your questions on… yes that’s right — CSS Animations. No matter where you are in your CSS journey, Donovan will be able to answer your questions and give you advice to help bring your websites alive.

If you’re not familiar with Donovan, he is a very impressive CSS animator with an equally impressive portfolio and weekly newsletter. He’s also the teacher behind our latest course Animating with CSS.

This is all happening live, right here at 12pm (PST)! If you’re from another timezone, you can see what time this is happening from your part of the world.

If you can’t make it, feel free to leave your questions below (ahead of the event). @donovanh will be getting around to them during the event.

Happy asking and most importantly, learning!

7 Likes

Hi @donovanh. There’s not much need to use vendor prefixes for things like border-radius these days. Are there any parts of CSS animation where vendor prefixes can pretty safely be dropped now?

8 Likes

Hi @donovanh. Is there any likelihood that we can animate to ‘auto’ values in the future or is that one of the things that will never be implemented?

I know there are hacks (like animating from zero to auto using max-height/width with a larger value that you expect the content to be) but their use is limited and contrived.

3 Likes

Not so long ago - or maybe for web dev 4 months is a long time - there was this Q&A

At the time, I felt I understood the difference between Animations, Transitions and Transforms. But if I try to explain the difference it becomes obvious to me that I don’t.

Do you have a definition that even I could understand?

3 Likes

Hi @donovanh, I have two questions:

  1. What encouraged/inspired you to create CSS Animations.rocks (and on that note, why have a .rocks URL and not the usual .com? I’m curious)

  2. In the CSS Animations course description on SitePoint Premium, it says there are two challenges with CSS Animations - the creative challenges and the technical challenges. Can you please elaborate on that, particularlly the differences between the two?

3 Likes

Hi @donovanh, would you recommend CSS animations to work with SVG graphics or using a robust JS library would be a safer, more browser-compatible way to animate SVG? Cheers!

2 Likes

What do you find that most people have trouble understanding about CSS animations, and what’s your advice to people to correct it?

E.g. let’s say they have trouble remembering the order of the animation shorthand property values (name/duration, etc)

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

Very much with margin property, we have “like a clock” (top right bottom left, like a clock), is there something similar with animations you like? I learned it by just brute forcing it, but I’m wondering if you have something better?

5 Likes

Hi @donovanh, what are your tips for making sure CSS animations perform well in the web browser and not impact user experience? Do you have any recommended tools apart from browser devtools you use for testing CSS animations? Thanks!

2 Likes

I would love to have a reference that details differences for each major browser when using CSS for animation, full screen backgrounds, video backgrounds … basically everything where there’s a difference.
Even better would be a cut-n-paste type reference or still better a fully built .css file with everything already there as classes.

1 Like

Hi @donovanh Triggers and timings. Will your course cover how to “easily” have one event trigger another event? For instance, at the end of an animation (which I seem to have no luck getting to work) or from other events (ie. collision detection). Thanks.
(Coming from a Macromedia/Adobe Director background, where I could do anything with Lingo!)

2 Likes

Hi @donovanh Is it possible to animate the <details> tag so that when you click on the summary the full details are displayed over a period of, say, .5s rather than immediately? I’m sure I have seen something like this done with JS, but since (I think) the height attribute cannot be animated I’m not sure if this can be done in CSS alone.

3 Likes

Hey folks, fantastic to see a great turn out so far.

I encourage any lurkers to get their questions in before the hour mark!

Let’s extend a warm welcome to @donovanh and get this AMA session underway.

Donovan is the creator of CSS Animation Rocks. He spends his time solving UX challenges, designing and building bots, teaching CSS Animation and learning.

If you’re up for learning some CSS Animation yourself, you should check out his latest course on SitePoint Premium, sign up to his (awesome) weekly newsletter or dive into his CSS Animation email course..

You can keep in touch with him beyond this AMA session @donovanh on Twitter.

Let’s rock and roll.

4 Likes

Hey all - thanks for the lovely welcome! I’m loving these questions. Let’s talk animation :tada:

4 Likes

Looking forward to it!
PS Like the bounce effect on the second hand of your clock - good animation techniques.

I’m not sure! I found a discussion here where the last comment states:

This has been discussed at the CSSWG, I don't believe there's much appetite for it given the complexity that it would introduce to both specifications and engine.

The issue is marked as “Wontfix”. So maybe JavaScript is the only way for now :confused:

3 Likes

Currently the global support for the “animation” property is over 90%, but the “unprefixed” support is around 80%, so I’d keep on using prefixes for that for now.

Though not related to animation, “transforms” are a popular property for animating and they’re in a similar position.

Transitions seem a little better supported but at 83%, I would imagine it’s still worth prefixing it for those visitors using older browsers.

I tend to use Gulp and Autoprefixer on most projects. As long as that’s kept up to date, the result should be fairly good at ensuring things will work.

If in doubt, ShouldIPrefix.com is a handy reference!

6 Likes

Firstly, thank you for linking to Tiffany’s AMA! I’d managed to miss that. I’ve followed her work (on CodePen mostly) for the past couple of years and she’s an incredibly talented designer. If there were any questions there you’d like me to weigh in on, do let me know.

On the question of the difference between animations, transitions and transforms, here’s how I think about it.

  1. Transitions = A to B

A transition is when the browser creates an animation between one style, and a second style. Most often you’d want to use this for something like a hover effect, or when the class on an element changes, and you want the styles to change smoothly. For example, changing the colour of a button on hover. Transitions usually don’t happen by themselves, they need some kind of nudge or change to occur.

We implement transitions using only the “transition” property on the element that you want to be animated.

  1. Animations = A to B to C … etc

Animations do more than change from one state to another. They can visit as many styles of “frames” as you like. You’d want to use an animation when it needs to animate on load automatically, or when there’s more going on that just a transition from one state to another.

Animations offer more control also, such as infinite looping, so the movement plays continually.

We implement animations using two properties: “keyframes” and “animation”. Keyframes are instructions on what the animation does (go here, change to this style, then move here) and the “animation” property is how we apply the keyframes to a specific element.

  1. Transforms

Transforms aren’t really a part of animation, but they’re often used together. A transform manipulates an element in some way, by adjusting it’s position, rotating, scaling or skewing it. If you set an element to “translateX(2em)” for example, the element will be set to the right a distance of 2em. It’s important to keep in mind that it’s not animated 2em to the right, just placed instantly. The “transform” is more like a way of saying “oh by the way, put that over to the right”.

When we use transforms within animations, we can animate this change over time. Take these keyframes:

@keyframes move-right {
from { transform: none; }
to { transform: translateX(2em); }
}

This is an animation, because it tells the browser to move the element from “no transform” to “translateX(2em)”.

Turns out, browsers are really good at at animating certain properties, and transform is one of them. They’ll usually be smoother than animating positional properties like “top” or “left”.

I hope this helps!

9 Likes

I know right!? I never get tired of that :clock2:

1 Like

Hi Donovan,have you thought to maybe create some course in which you whould explain css perspective in depth in combination with animation?I think that its great pair combined,did some playing with it in the past,but still strugling with perspective(how far gives what and always have to play around till i get desired outcome)

2 Likes