Sign in Get started

CSS Tutorial · Beyond the Basics · Lesson 18 of 19

CSS Transitions and Animations

Smooth state changes with transition, keyframe animations and transforms.

Transforms

transform moves, scales and rotates elements without affecting layout: translate(), scale(), rotate().

Transitions

A transition animates a property change, e.g. on hover:

Example 1Try it yourself
<style>
  .card { width: 180px; padding: 16px; border-radius: 12px; background: #eef2ff; font: 14px system-ui;
          transition: transform 200ms ease, box-shadow 200ms ease; }
  .card:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 12px 24px rgb(0 0 0 / 15%); }
</style>
<div class="card">Hover me — I lift smoothly.</div>

Keyframe animations

@keyframes defines steps; animation applies them:

Example 2Try it yourself
<style>
  body { display: flex; gap: 30px; align-items: center; padding: 20px; font: 13px system-ui; }
  .spinner { width: 36px; height: 36px; border: 4px solid #cbd5e1; border-top-color: #2563eb; border-radius: 50%;
             animation: spin 0.8s linear infinite; }
  .pulse { width: 16px; height: 16px; border-radius: 50%; background: #16a34a; animation: pulse 1.2s ease-in-out infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes pulse { 50% { transform: scale(1.6); opacity: 0.4; } }
</style>
<div class="spinner" role="status" aria-label="Loading"></div>
<div class="pulse"></div> Online

Performance and accessibility

  • Animate transform and opacity — they're cheap for the browser. Animating width or top causes layout work.
  • Respect users who prefer less motion:
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Test yourself

Which two properties are cheapest to animate?

  1. width and height
  2. top and left
  3. transform and opacity
  4. margin and padding
Show answer

Answer: transform and opacity