Timing Function Ease

Timing functions control animation speed curves.

Preview

Code

<style>
.box{
width:120px;
height:80px;
background:#ef4444;
transition:transform 0.5s ease;
}

.box:hover{
transform:translateX(40px);
}
</style>

<div class="box"></div>

More CSS Transitions Examples (8)