Learned how to use the transition property of CSS today. It controls the transition when an object goes from one set of css properties to another, the second set of which is usually defined using a :hover.
Definition
selector {
transition: <property> <duration> <timing-function> <delay>;
}What each piece does:
property: which CSS property should the transition target. Should note that not all properties can be targeted, learned this when I was trying to do a transition ondisplay. While writing this post I found a handy list of properties you can use here. Also, you can use the wordallto just target everything which in my mind would work for 99% of use cases.duration: how long should the transition lasttiming-function: This controls the effect that is used to move between the two states. There is a ton of options, but honestlylinearoreasewill probably work for you.delay: add a delay to the start of the transition
Example
button {
background-color: blue;
transition: background-color 1s linear;
}
button:hover {
background-color: green;
}The above will change the colour of a button from blue to green when you hover over it with your mouse, and the change will take 1 second.