Going Through HTML & CSS courses, I learned A LOT, but surprisingly, I never come across the property up until recently, and I've been loving it ever since. Transition What Is CSS Transition? in short, CSS Transition is a CSS Property meant to provide a way to control animations' timing and smoothness! but, why not show you an example because what's a better way to explain than showing an example? Let's make an HTML file together! we gonna make a div that has a red background color and a light blue border (I'm not the best at picking colors). we'll give it 100px for both width and height, and 3px to the border. I also added box-sizing: border-box; to make the box always stays the same width and height (100px) however we increase the border, learn more about it ! here our result will look like this: <!DOCTYPE html> < > html < > head < > style { : ; : ; : border-box; : red; : solid lightblue; } div width 100px height 100px box-sizing background border 3px </ > style </ > head < > body < > div </ > div </ > body </ > html now, let's make the colors of the background and the border switch when we hover on the div (using div:hover selector), we'll also make the border bigger (25px) : { : lightblue; : solid red; } div :hover background border 25px now if we open the HTML file and hover on the div, the changes will happen, but instance and with no animations or anything, but with one single line of code we can make everything way better. We simply add transition: 450ms; (450ms means 450 milliseconds) to the div selector. our final result will look like this: <!DOCTYPE html> < > html < > head < > style { : ; : ; : border-box; : red; : solid lightblue; : ; } { : lightblue; : solid red; } div width 100px height 100px box-sizing background border 3px transition 450ms div :hover background border 25px </ > style </ > head < > body < > div </ > div </ > body </ > html if we now refresh the page and hover again, you'll see how everything changes smoothly. how cool is that? with just one single line, you can make everything changes smoothly on the page, no rules or anything! @keyframes CSS Transition Properties but wait, that's not everything CSS Transition can offer here are all the properties that are related to it : transition-delay How much time before the 'transition' or 'animation' starts. transition-duration How long the Animation plays. transition-property which property to have a transition effect. transition-timing-function The speed curve of the transition effect. and explain themselves, but what about the and transition-duration transition-delay transition-property transition-timing-function : let's say we have a div (same as the one above) but instead of changing the color only, you gonna also rotate the div 45 degrees, but you want it to instantly rotate it and the rest to animate in 450ms transition-property we simply add to make the background and the border animate, and add to add the duration transition-property: background, border; animation-duration: 450ms; (duh) and of course, we go to the div:hover and add so the box rotates transform: rotate(45deg); the result will look like this : <!DOCTYPE html> < > html < > head < > style { : ; : ; : border-box; : red; : solid lightblue; : background, border; : ; } { : lightblue; : solid red; : (45deg); } div width 100px height 100px box-sizing background border 3px transition-property transition-duration 450ms div :hover background border 25px transform rotate </ > style </ > head < > body < > div </ > div </ > body </ > html and there you go, now the border will just instantly rotate 45 degrees : transition-timing-function when you normally add a transition effect to anything, it will move at the same speed the whole time, think of it like a car going from A to B in a speed of 50 kilometers per hour, but in this case, instead of speeding up until it reaches 50k/h, it instantly starts at that speed, and when it reaches point B, it instantly stops, that's how transition works by default. but with this property, we can control that, for example I made this pen on CodePen : https://codepen.io/SpaYco/pen/zYGNNaX as you can see, we have 2 cars, and if you hover on any of them, both will move, the first one will move at the same speed, while the second will take time to start speeding up and slowly decrease the speed as it's reaching the end, but they will both reach the same destination at the same time! that's because we added to the second car! transition-timing-function: ease-in-out; see the full list of the values of this property on . w3schools Changing Multiple Properties this is all cool, but what if we wanted to make the border change in 450ms, and the background color to change in 750ms while it has ease-in timing function? simple! we simply use for multiple changes. transition so if we want to do what I said above we simply do the following transition: border 450ms, background ease-in 750ms; (it is recommended to use each property in its line for better readability, as shown in the result below) so here's the result of making those changes (I removed the rotation because it's irrelevant now) <!DOCTYPE html> < > html < > head < > style { : ; : ; : border-box; : red; : solid lightblue; : border , background ease-in ; } { : lightblue; : solid red; } div width 100px height 100px box-sizing background border 3px transition 450ms 750ms div :hover background border 25px </ > style </ > head < > body < > div </ > div </ > body </ > html if you add these changes to the HTML we made earlier, and refresh the page, you'll see that each property has its own time and timing function! Summary The CSS Transition is a cool property to use on your website, not only it will make it look better with the animations and effects, but also make it more alive and attractive to users! I recommend start messing with it and see its capabilities!
