Fill out the fields in the CSS Transition Generator form below to get CSS easing rules. Choose the transition property Type to animate, the easing Timing curve, and how much Time the animation should take in seconds, such as 1.5. You can also input a Less or Sass variable name.
Click the Add another rule button to generate CSS transitions for multiple properties in one code block.
CSS3 transitions can add some dynamic and powerful effects to a web page. For more information on transitions, see the MDN Developers Guide on CSS Transitions where they have many examples available. There are a lot more options to play with, although not all browsers support some of the fancier rules.