CSS — Lesson 7
Animations & Transitions
Adding motion and interactivity with CSS.
Animations & Transitions
CSS animations and transitions bring your pages to life with smooth motion and interactive feedback.
Transitions
Transitions smoothly change property values over a specified duration.
.button {
background: #333;
color: white;
transition: background 0.3s ease;
}
.button:hover {
background: #555;
}
Transition Properties
/* Specific property */
transition: opacity 0.3s;
/* Multiple properties */
transition: transform 0.2s, background 0.3s;
/* All properties */
transition: all 0.3s ease;
/* With delay */
transition: transform 0.3s ease 0.1s;
Transition Timing Functions
- ease - slow start, fast middle, slow end (default)
- linear - constant speed
- ease-in - slow start, fast end
- ease-out - fast start, slow end
- ease-in-out - slow start and end
Keyframe Animations
For more complex animations, use @keyframes.
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.box {
animation: fadeIn 0.6s ease-out;
}
Animation Properties
.element {
animation-name: slideIn;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-delay: 0.2s;
animation-iteration-count: infinite; /* repeat forever */
animation-direction: alternate; /* back and forth */
}
Transform
The transform property modifies the appearance of an element without affecting layout.
.box:hover {
transform: scale(1.1); /* grow */
transform: rotate(45deg); /* rotate */
transform: translateX(20px); /* move right */
transform: translateY(-10px); /* move up */
}
Hover Card Example
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
Tip: Prefer
transform and opacity for animations - they are GPU-accelerated and perform better than animating properties like width or height.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →