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>
