Set what you want to animate with transition-property

With the transition-property you set the CSS properties to animate. These can be comma listed or you can use the value all to animate any properties that have changed from one CSS rule to another.

The following will animate both the width and the padding properties.


If you have ever used a tool like Flash you will know that animations can be made more realistic by applying what are known as easing functions. Think of the way a train eases into and stops at a station. That would be an ease-out. The way a train starts from the station slowly and speeds up is known as an ease-in. By default CSS animations have an easefunction applied to them so they start slowly and also slow down towards the end. The best way to understand the ease functions is to see them in action.