Transitions and Animations
Section 4: CSS Transitions and Animations
Lesson 1: CSS Transitions
CSS transitions provide a way to create smooth and gradual property changes in response to user interactions or state changes. This lesson covers the essentials of CSS transitions, including duration, timing functions, and delays.
1.1 Adding Smooth Transitions to Property Changes
Transitions are applied to specific properties, specifying how they change over a defined duration.
button {
background-color: #3498db;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #2980b9;
}
1.2 Transition Duration, Timing Function, and Delay
Duration: Specifies the time taken for the transition.
button {
transition: background-color 0.5s ease-in-out;
}
Timing Function: Defines the acceleration curve of the transition.
ease: Slow at the beginning and end, fast in the middle.
linear: Constant speed.
ease-in: Starts slow and speeds up.
ease-out: Slows down towards the end.
...and more.
Delay: Introduces a delay before the transition begins.
button {
transition: background-color 0.5s ease 0.2s;
}
Lesson 2: CSS Animations
CSS animations offer more control and flexibility, allowing the creation of complex motion effects. This lesson introduces keyframe animations and covers animation properties.
2.1 Creating Keyframe Animations
Keyframes define the stages of an animation and the styles applied at each stage.
@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.element {
animation: fadeInOut 3s infinite;
}
2.2 Animation Properties: Duration, Timing Function, Delay, Iteration
Duration: Specifies the total time of the animation cycle.
.element {
animation: slideIn 2s;
}
Timing Function: Defines the pacing of the animation.
.element {
animation: slideIn 2s ease-in-out;
}
Delay: Delays the start of the animation.
.element {
animation: slideIn 2s 0.5s;
}
Iteration: Sets the number of times the animation cycle should repeat.
.element {
animation: slideIn 2s infinite;
}
By understanding transitions and animations, you can enhance user experience by introducing subtle or dynamic visual effects to your web pages. In the upcoming sections, we'll explore advanced CSS techniques and best practices.