Transitions

From snap to smooth

transition tells the browser to animate a change over time instead of snapping instantly. Add it to the element, then change a property on :hover.

<style>
  .btn {
    background:#4338ca; color:#fff; border:none; padding:12px 22px; border-radius:10px;
    cursor:pointer; transition: background 0.25s, transform 0.15s;
  }
  .btn:hover { background:#06b6d4; transform: translateY(-3px); }
</style>
<button class="btn">Hover me — I animate</button>

The magic is the transition line on the normal .btn rule: transition: background 0.25s, transform 0.15s. It tells the browser “whenever background or transform changes, ease into the new value over this many seconds instead of snapping”. The :hover rule then changes those exact properties (to cyan, and lifted up 3px). Because the transition is declared on the base element, the change animates smoothly both when you hover and when you move away. Hover the button to feel the difference between smooth and instant.

<style>
  .card { background:#fff; border:1px solid #e6e8f0; padding:20px; border-radius:14px; width:180px;
          transition: box-shadow .25s, transform .25s; }
  .card:hover { box-shadow: 0 14px 34px rgba(20,24,48,.18); transform: translateY(-5px); }
</style>
<div class="card">Hover to lift</div>

This is the popular “lift on hover” card. The base card declares transition: box-shadow .25s, transform .25s. On :hover it gains a bigger box-shadow (so it looks like it rose off the page) and transform: translateY(-5px) (it physically moves up 5px). Because both changes are in the transition list, the card glides up and the shadow grows smoothly, then settles back when you leave. Combining a shadow change with a small upward move is what sells the floating effect.