Custom WordPress themes and plugins

CSS Transition Generator

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.

More Information

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.