Using CSS Transitions – CSS Tutorial

4/13/2025

css button animation

Go Back

Using CSS Transitions – CSS Tutorial

CSS transitions allow web developers to create smooth, elegant animations without JavaScript. They make UI elements more interactive and visually appealing. This tutorial covers everything you need to know to get started with CSS transitions.

css button animation

1. What Are CSS Transitions?

CSS transitions enable you to change property values over time, rather than instantly. This is perfect for hover effects, button animations, and more.

Basic Syntax

.element {
  transition: [property] [duration] [timing-function] [delay];
}

2. CSS Transition Properties

PropertyDescriptionExample
transition-propertySpecifies the CSS property to animatetransition-property: width;
transition-durationSets how long the transition lasts (s or ms)transition-duration: 0.5s;
transition-timing-functionDefines the speed curve of the animationtransition-timing-function: ease-in-out;
transition-delaySets a delay before the transition beginstransition-delay: 0.2s;

3. Practical Examples

Example 1: Button Hover Effect

.button {
  background: #3498db;
  color: white;
  transition: background 0.3s ease;
}
.button:hover {
  background: #e74c3c;
}

Example 2: Expanding Width

.box {
  width: 100px;
  height: 100px;
  background: #2ecc71;
  transition: width 0.5s ease;
}
.box:hover {
  width: 200px;
}

Example 3: Fade-In Effect

.fade {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.fade.show {
  opacity: 1;
}

4. Transition Timing Functions

ValueBehavior
easeStarts slow, speeds up, ends slow (default)
linearConstant speed
ease-inStarts slow
ease-outEnds slow
ease-in-outSlow start and end
cubic-bezier()Custom speed curve

5. Transition vs. Animation

FeatureTransitionAnimation (@keyframes)
TriggerRequires a state change (e.g., :hover)Can run automatically or via JS
ComplexitySimple property changesSupports complex, multi-step effects
ControlLimited to start/end statesFull control using keyframes
PerformanceLightweightSlightly heavier

6. Best Practices

  • Animate transform and opacity for better performance.

  • Use subtle durations (0.3s–0.5s).

  • Use will-change to inform browsers about upcoming transitions:

.element {
  will-change: transform, opacity;
}

  • Test transitions on mobile for performance.

Conclusion

CSS transitions enhance user experience with lightweight and beautiful effects. They’re ideal for hover effects, fades, and basic animations. Master these basics to bring life to your web designs!

Table of content