CSS TRANSITION

Question

pls some can explain me css TRANSITION

Answer 1

Well CSS transitions are used to change properties of elements smoothly. They are most commonly used with pseudoclasses, which are for example :hover or :active. These classes tell us the current state of element. Let's have a <button>. The selector would look like this: button{}. This ruleset works for all buttons. However, if you hover over an element, you can specifically tell browser to apply style only to these elements. This means that we will have for example two rulesets: button{background:red;} and button:hover{background:green;}. If we translate it to a "human form", it would sound like this: "For all buttons, set background to green. For all buttons that have a mouse cursor pointing at them, set background to red.". Once the mouse cursor moves away from the button, the style returns back to the style defined for all buttons. Remeber that we also have more pseudoclasses like :active, :focus, :selected, :disabled. A transition property is used to change these properties smoothly. So for example I don't want the color of the button change instantly when i hover my cursor over it. In the button{} ruleset, i will define property transition. I can define it like this: transition:0.5s. This applies smooth transition for all properties with a duration of 0.5 seconds. However, if you want to apply transition for specific properties (for example background), you would have to change the property to transition:0.5s background. You can also choose the timing function, which can change the speed of transition over a time: transition:0.5s background linear. There are multiple timing functions like ease, ease*in, ease-out, ease-in-out, linear etc. You can also specify transition for multiple properties. Just sperate them with comma like this: transition:0.5s background linear, 0.2s color ease. Hope I helped. You can also check out W3Schools https://www.w3schools.com/css/css3_transitions.asp, if you did not understand. Happy coding!

Answer 2

Thank u bro

Answer 3

Matěj Jonáš thnks bro 🤝

Answer 4

Sure, no problem :)

Answer 5

Matěj Jonáš bro can you please do this code playground so I can understand it better 🙏

Answer 6

Here you go https://sololearn.com/compiler-playground/WunZm51HTj9x/?ref=app

Answer 7

Try it now

Answer 8

Link is not working