Chapter 10: CSS Transitions and Animations
10.1 Introduction to CSS Transitions
CSS transitions allow you to change property values smoothly (over a given duration) from one state to another. This is useful for creating interactive effects when the user hovers over or focuses on an element.
10.2 Syntax of CSS Transitions
The basic syntax of a CSS transition is as follows:
.element {
transition: property duration timing-function delay;
}
- property: The CSS property to animate (e.g.,
background-color,transform). - duration: The time for the transition to complete (e.g.,
0.5s,1s). - timing-function: Specifies the speed curve of the transition (e.g.,
ease,linear,ease-in). - delay: Specifies a delay before the transition starts (e.g.,
0.3s).
10.3 Example: Simple Hover Transition
Here’s a simple example of a hover effect where the background color of a button changes with a smooth transition:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<button class="button">Hover over me!</button>
</body>
</html>
When you hover over the button, the background color will change smoothly.
10.4 Introduction to CSS Animations
CSS animations allow you to animate multiple property changes at once, using keyframes. Unlike transitions, which occur in response to an event (e.g., hover), animations run continuously or in loops.
10.5 Keyframe Syntax
Keyframes define the intermediate steps in an animation. The syntax is:
@keyframes animation-name {
0% { /* Initial state */ }
50% { /* Midway state */ }
100% { /* Final state */ }
}
You can use keyframes to specify how an element should animate from one state to another.
10.6 Example: Simple CSS Animation
This example demonstrates a simple animation where a square moves across the screen:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #007bff;
animation: moveBox 2s infinite ease-in-out;
}
@keyframes moveBox {
0% {
transform: translateX(0);
}
50% {
transform: translateX(300px);
}
100% {
transform: translateX(0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
The square moves 300px to the right and then returns to its original position, looping infinitely.
10.7 Example: Animation with Multiple Properties
This example animates the square with multiple properties, including rotation and background color change:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #007bff;
animation: animateBox 2s infinite;
}
@keyframes animateBox {
0% {
transform: rotate(0deg);
background-color: #007bff;
}
50% {
transform: rotate(180deg);
background-color: #ff5733;
}
100% {
transform: rotate(360deg);
background-color: #007bff;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
This animation makes the square rotate and change colors every 2 seconds.
10.8 Summary
In this chapter, you explored CSS transitions and animations. You learned how to create smooth effects using transitions, and how to animate elements using keyframes. These techniques allow you to create dynamic and engaging user experiences. In the next chapter, we'll dive into advanced CSS layouts using Flexbox and Grid.
0 Comments