CSS transition – animation effect when properties change

CSS property transition can be used to create animation effect when other specified properties change. This can only be applied on animatable properties.

CSS property transition

1. When transition value is none, multiple transition values cannot be specified.
2. The values within single single-transition shorthand should be in order.

Example – transition

Change background-color on hover with transition effect.

<style type="text/css">
a:hover {
 background-color: lightblue;
}
a {
transition: background-color 2s ease;
}
</style>

<a href="#link1">Hover me to see transition in background-color</a>

Related

• CSS transition-property
• CSS transition-duration
• CSS transition-timing-function
• CSS transition-delay

Specification and Browser compatibility