Creating Buttery Smooth Animations in CSS

Read the tutorial: www.kirupa.com/html5/animating...
Check out the book: bit.ly/AnimBook2
-----------------
Learn how to use the translate3d transform to create animations that use a dash of hardware acceleration to run really smoothly.

[@MichaelThomasDev]

You're the first person to specify what GPU actually is, when you said 'graphics card' I was immediately able to comprehend what's actually going on here... another great tutorial!

[@kirupa]

+Michael Thomas Glad you liked it Michael. Us computer people do like to unnecessarily complicate things with three letter acronyms :P

[@isagive]

Great stuff man, understanding is what I was looking for ;) Great job explaining, thanks

[@sallaklamhayyen9876]

Kirupa Great teacher that provide best and right tutorial thanx you so much and we need more Tutorials like this about css Layout ,and UI

[@freshboy2334]

Very clear explanation. Thank you

[@Ikliptic]

Nice work - keep it up. Very much appreciated.

[@SBR72]

Great explanation. Thanks!

[@sakari.niittymaa]

Thanks for good explanation! Really like your style to go straight to the point! Thanks.

[@kirupa]

+Sakari Niittymaa Thanks, Sakari! Glad you like the style of the videos :-)

[@alexisbendelamousseauchocolat]

This helps me in a come back to Dev. I used to follow your ActionScript tutorials way back in 2003. I am surprised to see you in person. You look very young!

[@kirupa]

Haha, thanks Alexis! I am pretty sure the radiation from the computer monitors over the years has done some number on me haha.

[@matthewchiang]

Seriously! I thought you were 23ish...and then when your website said "since 1998" I was like "wait...dafuq?!" Anyway, didn't know using tranaslate3D without even specifying the z would automatically force GPU usage. Super dope!

[@kirupa]

Matthew Chiang haha! You are about 10 years off :P

[@andreparadise]

NICEEEEE VERYYYYYY NICEEE! GOOD JOB BRO! I will look at more of your work.

[@ahmedam77]

thanks for your time and efforts :)

[@Pankaj-Verma-]

Great video.

[@YaronRosen]

that's a great tutorial! thank you so much :)

[@RaviKumar-fx5dz]

clear presentation. good teacher you are.

[@aadershchaubey1399]

Learned new things... Thanks😁

[@TRugeroni]

You deserve many more views! Great tutorial :)

[@kirupa]

Haha! Thanks for the awesome comment, TRugeroni!!! :P

[@taospencer1403]

Console.log(typeof MyClassName) returns function? is that right?

[@darealtuck4420]

Nice video man

[@kirupa]

+Invalid Pleb Thanks, glad you liked it :-)

[@ioctane2891]

Can width an height be animated using GPU? Can CSS 'animation' rule be configured to use GPU too?

[@kirupa]

They can, but they also force a layout with each change. You shouldn't animate them if possible. CSS animations can be configured to use the GPU as well using the same techniques. Just set translate3d on the element you are animating, and you are good to go :-)

[@taospencer1403]

How would you move hue-rotate & hover effects such as filter:invert(100deg) and Animation of Box-Shadow? ;to the GPU. I'm not using any transforms or changing size/rotation etc but my animations are still very slow.

[@kirupa]

Ryan Stone You could just move the entire element’s rendering to the GPU using translateZ/translate3d.

[@taospencer1403]

@@kirupa Thank you this answers a seperate question that I had about 3d flip cards but Is hue rotate CPU or GPU based & Do all animations force a recalculation of the entire page except 3d transform? I'm still a little confused and trying to wrap my head around this. My animations are perfoming poorly @ anywhere between 1/2 fps up to 30.. But no where near 60fps...

[@taospencer1403]

I know that hue rotate will cause many re-paints of individual areas, but this is different to re-calculating the entire styles...

[@taospencer1403]

@@kirupa What I have taken from your video is that translateX*Y*Or*Z and Translate 3d are all handled by the GPU. Which is a good thing but all other animations are using the CPU which is bad... Is this correct?

[@taospencer1403]

@@kirupa I have updated the question and added some comments.

[@361degressvr7]

too much code for an animation u can do with 2 interpolations in a button

[@satyamchoudhary5859]

hey are you from india

[@kirupa]

Yes! I was born there. I've lived in the US most of my life, though.