CSS Transitions and Animations

CSS can change styles smoothly over time, which makes a page feel alive and easier to use.

Transitions

A transition makes a change happen slowly instead of instantly. You say which property should change and how long it should take.

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
.btn {
  background-color: #264de4;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  transition: background-color 0.4s ease;
}
.btn:hover {
  background-color: #f97316;
}
</style>
</head>
<body>

<button class="btn">Hover over me</button>

</body>
</html>

Try it Yourself »

The transition shorthand takes up to four values:

Part	Example	Meaning
Property	`background-color`	What changes (or `all`)
Duration	`0.4s`	How long it takes
Timing function	`ease`, `linear`, `ease-in-out`	The speed curve
Delay	`0.1s`	Wait before starting

Transform

transform moves, resizes or rotates an element without affecting the layout around it. It works very well with transitions.

Function	Example	Effect
`translate()`	`translate(10px, -5px)`	Moves it
`scale()`	`scale(1.1)`	Makes it bigger or smaller
`rotate()`	`rotate(45deg)`	Turns it

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
.card {
  width: 180px;
  padding: 20px;
  background-color: white;
  border: 1px solid #dddddd;
  border-radius: 10px;
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
</style>
</head>
<body>

<div class="card">
  <h3>Laptop Bag</h3>
  <p>Rs 2,499</p>
</div>

</body>
</html>

Try it Yourself »

Keyframe Animations

A transition needs a trigger, like hover. An animation can play by itself and repeat. First describe the steps with @keyframes, then attach it with animation.

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.offer {
  display: inline-block;
  background-color: crimson;
  color: white;
  padding: 10px 16px;
  border-radius: 20px;
  animation: pulse 1.5s ease-in-out infinite;
}
.loader {
  width: 40px;
  height: 40px;
  margin-top: 20px;
  border: 5px solid #dddddd;
  border-top-color: #264de4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
</style>
</head>
<body>

<span class="offer">50% OFF today</span>
<div class="loader"></div>

</body>
</html>

Try it Yourself »

Animation Properties

Property	Example	Meaning
`animation-name`	`pulse`	The `@keyframes` name
`animation-duration`	`1.5s`	Length of one cycle
`animation-timing-function`	`ease-in-out`	Speed curve
`animation-delay`	`0.5s`	Wait before starting
`animation-iteration-count`	`3` or `infinite`	How many times it plays
`animation-direction`	`alternate`	Play backwards on every other cycle

Use Movement Carefully

Keep most transitions short: 0.2s to 0.5s
Animate transform and opacity; they are the smoothest for the browser
Do not make important text move all the time

Some people feel sick from moving screens. Respect their setting with @media (prefers-reduced-motion: reduce) { * { animation: none; transition: none; } }.

Exercise

Which CSS rule defines the steps of an animation?

@media@import@keyframes@animation