Animating with CSS Transitions - A look at the transition properties

Animation on the web is an awesome way to both catch a users attention and to help improve the user experience when it is used correctly. The easiest way to add animation to your website is by using transitions, which we'll look at in this tutorial.

In this video, I explore the four different transition properties, seeing what they do, and how to use them:
- transition-duration
- transition-property
- transition-timing-function
- transition-delay

As well as the shorthand 'transition' property, which allows us to combine all of the above into a single property, making life a lot easier.

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[mountains_and_stuff]

The tips on Javascript using ms and the CPU/GPU strain of certain animations is gold. Thank you!

[NeroIvanY]

Finally! I have understand the difference between all these 'ease' transitions! Thank you, Kevin!

[casperr]

Thankyou Kevin for the clear explanation!. For everyone who wants to remember the transition-timing-function (6:44) I thought about the following: The subject is your home just remember around the house u are quick when leaving u are in hurry, When arriving back home u are late so running in the home also. This makes the values mean:

Ease-in = u start walking slowly but when u arrive u race inside.
Ease-out = u leave the house in a hurry; running and then continue walking slowly.
Ease-in-out = combine above! (the home is the running part again). Just like the mailmen that approach the house with the mean guard dogs; u walk slowly run to that house and run away to walk slowly again.
Linear = without a house. Just a slow and steady walk true town.

[flaviucristian]

For a junior full-stack dev I found your videos very useful. You are explaining new concepts really well. Keep up the good work

[planttherapyph]

For a while, I've been so confused when to use keyframes and transitions, but thanks for this! Finally, I understood it so much better!


"Transitions require a trigger to run. The trigger may be one of the events listed in the last section or it might be JavaScript, but the transition needs something outside itself to start.

CSS animations don’t need a trigger. They can respond to a trigger, but one isn’t needed to start the animation. Animations can run automatically when the page first loads. If you need your elements to change or move automatically, you have only one choice: animations.

Transitions are limited to an initial and final state. Animations can include as many intermediate states (keyframes) as desired in between the initial and final states. This gives you more control over CSS animations and lets you create more complex animations. Transitions work better for simpler animations.


Transitions can’t change CSS properties. You set the property values on a selector and perhaps the selector’s :hover state. The transition defines how the change occurs, but not the specific start and end values.

Animations, on the other hand, can change property values inside their keyframes. The property values don’t even need to exist outside of the animation keyframes. This makes animation far more dynamic and flexible than transitions.

Transitions can’t loop. They run when triggered and then run in reverse when the trigger is removed. Animations can loop as many times as you want. They can run forward or in reverse, or they can alternate between the two. Once again, CSS animations offer more refined control.

I’m probably making it sound as though you should always choose animations. Transitions have their good side, too. Transitions are typically easier and quicker to work with. This is especially true if you use JavaScript to give yourself a little more control. For example, it’s easier for JavaScript to make changes to intrinsic property values than to property values inside animation keyframes.

As a general rule, you’ll write more code using CSS animations than you will using CSS transitions, assuming both are attempting to do the same thing. However, if you find yourself writing the same transition code over and over, you might want rewrite it as a single keyframe animation that can be easily added to a number of different elements."

[facundocorradini]

oh c'mon, with such a great content you're forcing me to click that thumbs up button on every video you upload by now.

[atarixle]

I used transitions for quite a long time now, but as they say:"Every Day You Learn Something New". Thank you for teaching me cubic-bezier and transition-delay. Together this your Video "::before and ::after" (Part 2) I replaced a JavaScript function with CSS only. Keep making such great videos!

[sinc]

Although It's been like 3 years since this video was released, but because of you, I have found a treasure chest in my browser's dev tools (yes I was talking about that curve thingy). Thank you :)

[huguolin]

Just great. You're my mentor in CSS. Humble, kind and the stuff. Thanks Kevin.

[joeldcanfield_spinhead]

Especially appreciate the insight into CPU/GPU usage. Some of us (ahem*me*ahem) like to, as someone said in this video, animate everything. I"m also learning a lot about the inspector in Chrome; so much I didn't realize I was missing.

[threeone]

Kevin's channel and webdevsimplified are the absolute best!

[borisbosnjak]

This is the first time I am seeing this cubic-bezier value...It's so helpfull and fun to play with. Thank you!

[davidam]

Its my first time playing with transitions and you help me a lot, thank!

[DustinHein]

kevin powell was the name of one of my hockey heroes when i was a kid. great videos!

[Anonymous]

Thanks for this important video. I always watch your videos but I found this video extremely helpful. Keep making this type of episodes.

[d.o.nmuzic]

KEVIN This simple and clear break down was so good! I just started trying to learn css two days ago. Your simple breakdown really help me get a good understanding. Thank you! Do you have something like this for css grid/and or positioning? I really appreciate this tutorial!

[akashkhatri]

Thank you so much for this! I really hope you make some backend related videos as well, like PHP, Laravel etc. You make it really easy to understand things.

[revillsimon]

Just like the amp/filter envelopes on a synthesizer... If you're a musician, you'll already understand it. For me, this was a bonus!

[CamaguNcoso]

HTML and CSS are now the food I eat. I'm a beginner

[cleitonandrade]

Best tutorial I found on CSS transitions.