Transitions · CSS · CodeMIRAI

Without a transition, a hover effect snaps instantly. With one, the change animates:

HTML

<style>
  .btn { margin: 6px; padding: 12px 22px; border: 0; border-radius: 8px; color: white; font: 600 16px system-ui; cursor: pointer; }
  .snap { background: #888; }
  .snap:hover { background: #5a48f5; }
  .smooth { background: #888; transition: background-color .3s ease; }
  .smooth:hover { background: #5a48f5; }
</style>
<button class="btn snap">No transition</button>
<button class="btn smooth">With a transition</button>

Hover each button. The transition goes on the element's normal state, not on :hover, so it animates both ways: in when the pointer arrives, and back out when it leaves.

The parts

CSS

transition: background-color 0.3s ease 0s;
/*          property         duration timing delay */

property: what to animate, or all, which is convenient but may animate things you didn't intend.
duration: 0.3s or 300ms. Most interface transitions feel right between 150 and 400ms.
timing function: the speed curve.
delay: how long to wait before starting.

Several properties are separated by commas: transition: transform .2s ease, box-shadow .2s ease;

Timing functions

Hover over the track to race them:

HTML

<style>
  body { font: 13px system-ui; }
  .track { padding: 8px; border: 2px dashed #b7adff; border-radius: 10px; }
  .lane { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
  .lane span { width: 100px; flex: none; }
  .ball { width: 26px; height: 26px; border-radius: 50%; background: #5a48f5; transition: transform 1.2s; }
  .track:hover .ball { transform: translateX(min(380px, 55vw)); }
  .linear .ball   { transition-timing-function: linear; }
  .ease .ball     { transition-timing-function: ease; }
  .ease-in .ball  { transition-timing-function: ease-in; }
  .ease-out .ball { transition-timing-function: ease-out; }
  .custom .ball   { transition-timing-function: cubic-bezier(.5, -0.6, .4, 1.6); }
</style>
<div class="track">
  <div class="lane linear"><span>linear</span><div class="ball"></div></div>
  <div class="lane ease"><span>ease</span><div class="ball"></div></div>
  <div class="lane ease-in"><span>ease-in</span><div class="ball"></div></div>
  <div class="lane ease-out"><span>ease-out</span><div class="ball"></div></div>
  <div class="lane custom"><span>cubic-bezier</span><div class="ball"></div></div>
</div>

ease-out, fast and then slowing, suits things arriving on screen; ease-in suits things leaving. cubic-bezier() defines a curve of your own, including overshoots like the last ball's.

transform: move, scale, rotate

transform changes how an element is drawn without disturbing the layout around it, which makes it ideal to transition:

HTML

<style>
  body { display: flex; flex-wrap: wrap; gap: 16px; padding: 20px; font: 600 14px system-ui; }
  .t { width: 100px; height: 70px; display: grid; place-items: center; border-radius: 10px;
       background: #0aa9cf; color: white; cursor: pointer; transition: transform .3s ease; }
  .up:hover    { transform: translateY(-8px); }
  .grow:hover  { transform: scale(1.15); }
  .turn:hover  { transform: rotate(15deg); }
  .combo:hover { transform: translateY(-6px) rotate(-4deg) scale(1.05); }
</style>
<div class="t up">lift</div>
<div class="t grow">scale</div>
<div class="t turn">rotate</div>
<div class="t combo">all three</div>

A real component

HTML

<style>
  body { padding: 16px; background: #f6f7fb; font-family: system-ui; }
  .card { width: 240px; overflow: hidden; border-radius: 14px; background: white;
          box-shadow: 0 2px 6px rgba(0, 0, 0, .08); transition: transform .25s ease, box-shadow .25s ease; }
  .card img { display: block; width: 100%; transition: transform .4s ease; }
  .card p { margin: 0; padding: 12px 14px; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .15); }
  .card:hover img { transform: scale(1.06); }
</style>
<div class="card">
  <img src="https://picsum.photos/seed/card/480/270" alt="">
  <p><strong>Data Science with Pandas</strong></p>
</div>

The card lifts while its picture zooms gently inside it; overflow: hidden clips the zoom to the card's rounded corners.