Css Transition Ease In Out - Css

How to use ease in and ease out property using css?

Snippet Code


  
Rate this page :
  [ 0 votes]

This css code can be used to do ease in and ease out transition effects using transition-timing-function property. Ease in will start the animation slowly and finish at full speed. Ease out will start the animation at full speed then finish slowly.

<style> .demo { width: 80px; height: 20px; background: green; color: white; font-weight: bold; padding:10px; cursor:pointer; transition: width 2s; } #easein {transition-timing-function: ease-in;} #easeout {transition-timing-function: ease-out;} .demo:hover {width: 200px;} </style> <div id="easein" class='demo'>Ease-in</div> <div id="easeout" class='demo'>Ease-out</div>

Tags


Ask Questions

Ask Question