Core Code
Core Code Modern Dev Handbook

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)

example Basic CSS Transition open example example Width Transition open example example Multiple Property Transition open example example Transform Transition open example example Transition Delay open example example Timing Function Linear open example example Button Hover Transition open example example Card Hover Lift open example