I’d love to. Perspective is really fun, and tricky. I’ve mentioned it a bit in some articles, like here under Getting Started.
5 Likes
- I got into computers back when you could program a game by copying text from a magazine, and at the same time quickly found myself using computers to design 3D images and music. I’ve always liked this combination, creating with both code as well as visually. When I got into web, CSS was becoming a thing and I’ve always loved CSS for the same reason.
Then a few years ago I started experimenting with how we csn transform and animate elements using CSS, and started sharing experiments on my blog (Hop.ie). It was well received, and I wanted to continue focusing on this animation stuff, so I registered the domain as a place I could focus on that particular topic.
As for the .rocks - it’s harder to get good .com names! I was trying variations of “cssanimation.something” and the rocks one seemed fun. Also I loved the idea of having the site be literally about rocks, the least animated thing ever! So I went with that. I like to keep projects fun wherever possible.
- Great question! Creative vs technical - I guess there’s creativity in the technical thinking, so that could be a little confusing alright. In terms of what I was thinking with this course, I think the “creative” side might be more the way we consider animation’s place within the design process. We design our websites and apps to be both visually appealing as well as useful, and there’s a lot of creativity needed to find visual solutions to the problems we’re solving. I believe animation is one of the tools we use when designing and understanding what can be achieved in the browser is part of that.
The technical challenges of CSS animation begin with implementation. Do we need a transition or an animation? Can we reuse keyframes or create new ones? Would a JavaScript solution be useful? Prefixing, optimising for different devices or older browsers are all questions that might come up during the build. Understanding what CSS is good for and how to use it as a technical tool helps when facing these decisions.
6 Likes
Assuming development would follow my usual “start simple then add to it” approach, Is there a kind of “Hello Animations” example that might help myself and others make the first step?
1 Like
There’s definitely a case to be made for using a robust JS library - they can offer more control and options than pure CSS, and they do indeed benefit from working with older browsers (ahem IE8).
I imagine it would come down to a decision around who your audience is, and what you want to achieve with the animation. If your audience includes lots of older browsers that don’t support the animation property, then that’s a good reason to use a JS framework.
Similarly, if you want to do more than what can be done with keyframes, it could be worth using JS also.
Having said all that, I usually reach for CSS first. Most times my animations can be wrapped in a “cssanimations” class using Modernizr, as the animation is usually not vital for accessing the content. I also find that I can get a lot done with just keyframes, and personally I enjoy trying to keep the number of JavaScript dependencies on a project as low as possible.
Always worth trying the options available, and choosing the right tool for the job.
5 Likes
You got me with this one - being self taught I’m sure I have a few blind spots and the way I use the animation shorthand might be one. Typically when I write an animation property I’ll set it out as “animation-name duration delay timing-function fill-mode”. For most cases this is enough.
I’d then maybe specify things like “iteration count”, “direction” or “play-state” separately - only because I’d rarely use them.
For absolute position I do use the TRBL (trouble) acronym but yeah, I don’t have one for shorthand. Practice and mistakes I do have though. 
3 Likes
thanks,short and ansers the question 
great article by the way,thanks!
1 Like
I try to follow the priciples of only ever animating properties that don’t trigger reflows, and when possible try to not animate large areas like full-page background colour. Trying to keep a handle on how many elements are being animated is a good idea too - there’s a point at which you want to think about using something designed for more complex animations, such as Canvas.
Beyond that - browser testing is kind of a hands on process. Borrowing people’s phones to do a quick test and make sure it works outside my own little bubble is one thing. Ideally setting up a test suite and using it to test more widely would be a good idea
If you know of any tools for testing animation performance and accessibility please do let me know. That would be awesome.
2 Likes
Hey Jesse - forgive me but does that sound a bit like Modernizr? You can set up custom builds to detect everything from HTML5 Video to Geolocation API and requestAnimationFrame.
I guess it wouldn’t quite answer the question of browser differences, but would be useful for testing capabilities.
1 Like
Most welcome, and thank you 
1 Like
Afraid not, this course doesn’t approach that aspect so much. You could certainly do some cool stuff with JavaScript, detecting the play state and reacting but I think that’s beyond the scope of most people’s needs when adding CSS animation to a page
1 Like
What do you mean by ‘reflows’ - can you give an example? Thanks!
2 Likes
I don’t know about this one. I’d have to crank up a CodePen and see what happens, but it kind of looks like the “details” tag does some magic browser stuff, so maybe it’s not possible to animate it natively.
2 Likes
Hi again,i’m not sure have you posted something about this,but do you know some tool that could help us optimize our animation so it whould go smooth(regarding frames per second).havent realy had a lot of time to play around recently so im just poping out what I manage to remember,know i had some problems with it a few times.
2 Likes
A reflow is when page content has to be recalculated, usually as a result of some content being added, removed or resized on a page. Since pages can be very tall, a reflow can mean recalculating lots of dimensions and positions and be hard work for the browser.
If we’re trying to animate at 60 frames per second, this extra load on the browser can cause stuttering, or jank, to be visible.
Google goes into more detail on it here
4 Likes
Well, Firefox does allow this (or used to, not checked lately). But for wider support, you can often (depending on the scenario) make do with transitioning/animating scaleY or font-size (from 0 to 1).
I’m not sure about tools - but if you delve into the Chrome or Firefox developer tools you can do some interesting stuff with animations. You can play them back slowly, tweak timing functions and see just what’s animating when. Could be useful when debugging a potentially badly performing animation.
3 Likes
i was hoping for magic stick here i guess.dev tools are great your right about that one,but debugging is a pain in the… 
work,work,work
1 Like
absolutely - still, they keep getting better! The timing function tweaking saves me a lot of back-and-forth.
2 Likes
And… that’s a wrap!
A big thank you to @donovanh for joining us today and answering all our questions. Fantastic work there!
A big thank you to everyone else for all your wonderful questions on CSS Animation.
For all those interested in learning more, check out Donovan’s new course Animating with CSS on SitePoint Premium (free for all members).
You can keep in touch with Donovan beyond this AMA session @donovanh on Twitter and I highly recommend his weekly newsletter.
4 Likes
Thank you everyone for the questions! I had a great time.
If you do take on the course and have any questions or thoughts, I’d love to hear from you.
8 Likes