There are a few properties that are related to
transition such as
transition-timing-function. You can specify each one individually, but since
transition is a shorthand CSS property, you can write all three values separated by a space in the transition cell in the editor.
So if we want to add a 0.2-second transition for an element's background color, you could write:
To control the timing function, we can write another value after the duration. There are a few keyword values for the timing-function value.
ease- specifies a transition effect with a slow start, fast middle, then slow end (this is the default)
linear- specifies a transition effect with the same speed from start to end
ease-in- specifies a transition effect with a slow start
ease-out- specifies a transition effect with a slow end
ease-in-out- specifies a transition effect with a slow start and end
Let's say you have a button and you want to add a smooth transition between the default and hover state styles. Exit the Hover state editor if it is open. Then, search for the transition property and type in a value. If you want to add a transition on all CSS properties, you can use the keyword
The value in the transition cell above is:
all 0.5s ease
If you want to segment out values, you can choose to write the individual values in their respective cell. In this example, you would write
all in the Transition Property cell,
0.5s in the Transition Duration cell, and then
ease in the Transition Timing Function cell. It would work the same in both cases.
Now when you hover over the link, you will see the colors change smoothly.