4.60 (5 reviews)
☑ What are CSS transitions
☑ How transition delays work
☑ How transition durations work
☑ How simple timing functions work
☑ How to do more advanced timing functions
☑ How to use transition shorthands
☑ How to target specific properties with transitions
Learn how to make your website stand-out and look smooth. Every web developer should utilize transitions in CSS to enhance their web page's style!
Transitions in CSS are used to make the transition of styles look smooth. For example, when you hover over a button and the button appears darker, instead of having it instantly become darker, we can make it gradually become darker, making the button feel more 'alive'.
In this course, we make sure to cover all of the things you need to know about CSS Transitions. This includes the following:
Transition Timing Functions
Custom Transition Timing Functions (cubic-besier)
With this knowledge, you should be able to do the following:
Create a button with a hover transition
Transition a background color smoothly between two different colors
Rotate HTML elements smoothly
Smoothly fade out the opacity of elements
Use cubic-besier to create custom transition timings
What should I know before taking this course?
Before taking this course, you should have a basic understanding of how CSS works in terms of using selectors to select different elements on an HTML page, and applying styles to those elements.
Basic HTML knowledge is also highly recommended, but not necessarily required.
All of the the source code is provided as attachments to each module. We provide a link to a website that allows you to run the code right in your browser, so you can freely mess around with the original source code and view your changes live.
Transition Duration Knowledge Check
Transition Property Knowledge Check
Transition Delay Knowledge Check
Transition Timing Functions with Defaults
Transition Timing Functions with Cubic-beziers
Using Dev Tools for Cubic-beziers
Transition Timing Functions Knowledge Check
Transition Shorthand Knowledge Check