Lecture Notes Of Class 21: CSS Animations
Objective:
Master animations in CSS to
create dynamic, smooth visual effects for web pages.
Introduction
to CSS Animations:
CSS animations allow you to
create smooth transitions and animations by gradually changing property values
over time. This is a powerful tool that enhances user experience on websites.
The @keyframes rule defines the animation's behavior, while the animation
property is used to apply the animation to elements.
Topics
Covered:
1.
@keyframes Rule:
The @keyframes rule is used to
define the animation's behavior, specifically the intermediate steps between
the starting and ending states. It specifies the styles at various points
during the animation.
Syntax:
css
CopyEdit
@keyframes
animation-name {
from {
property: value; /* Starting state */
}
to {
property: value; /* Ending state */
}
}
- The from
and to represent the beginning and end of the animation.
- You
can use percentage values to specify multiple intermediate steps, not just
from and to.
Example:
css
CopyEdit
@keyframes
slide {
0% {
transform: translateX(0); /* Start at the
initial position */
}
50% {
transform: translateX(100px); /* Move to
the right by 100px */
}
100% {
transform: translateX(0); /* End at the
initial position */
}
}
2.
animation Property:
The animation property is a
shorthand for defining an animation's key features. It includes the following
components:
- animation-name:
The name of the @keyframes rule to use.
- animation-duration:
The time it takes for the animation to complete one cycle.
- animation-timing-function:
Defines the speed curve (ease-in, ease-out, etc.).
- animation-delay:
Specifies a delay before the animation starts.
- animation-iteration-count:
The number of times the animation should play.
- animation-direction:
Specifies whether the animation should play forwards, backwards, or
alternate.
- animation-play-state:
Allows you to control whether the animation is running or paused.
Syntax:
css
CopyEdit
element {
animation: animation-name duration
timing-function delay iteration-count direction;
}
Example:
css
CopyEdit
.bounce {
animation: bounce 2s ease-in-out 0s infinite;
}
Here, the .bounce class will
apply the bounce animation for 2 seconds, using an easing function of ease-in-out,
with an infinite number of repetitions.
3.
animation-duration:
The animation-duration property
specifies how long the animation should take to complete one cycle.
Example:
css
CopyEdit
@keyframes
bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
.element
{
animation-duration: 2s; /* Animation lasts 2
seconds */
}
The duration can be in seconds (s)
or milliseconds (ms). For example, animation-duration: 2s will make the
animation last for 2 seconds.
4.
animation-iteration-count:
The animation-iteration-count
property defines how many times the animation should repeat. It can be set to:
- A
specific number: For example, animation-iteration-count: 3;
will play the animation three times.
- infinite: To
make the animation repeat endlessly.
Example:
css
CopyEdit
@keyframes
slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
.element
{
animation: slide 2s linear 0s infinite;
}
In this case, the animation will
repeat infinitely.
Lab
Exercise: Create a Bouncing Ball Animation Using CSS
Objective: Create
an animated bouncing ball effect using CSS.
Steps:
1. HTML
Structure: Create a simple HTML file with a div element to represent the ball.
html
CopyEdit
<!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Bouncing Ball Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="ball"></div>
</body>
</html>
2. CSS
Styling: Style the .ball class to make the ball circular and position it at the
bottom of the page.
css
CopyEdit
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-end;
background-color: #f0f0f0;
}
.ball {
width: 50px;
height: 50px;
background-color: #3498db;
border-radius: 50%;
animation: bounce 2s ease-in-out infinite;
}
@keyframes
bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-150px); /* Moves
the ball up */
}
100% {
transform: translateY(0); /* Moves the
ball back down */
}
}
Explanation:
- The .ball
element is styled as a circle with width and height set to 50px and a border-radius
of 50%.
- The @keyframes
rule defines the bounce animation, where the ball moves vertically.
- translateY(0)
starts the ball at its original position, and translateY(-150px) moves the
ball upward by 150px.
- The
animation has a duration of 2s, an ease-in-out timing function, and
repeats infinitely.
Important
CSS Animation Properties Recap:
- @keyframes:
Defines the stages of the animation and its effects.
- animation: A
shorthand property that combines multiple animation-related properties
like name, duration, timing-function, and more.
- animation-duration:
Specifies how long the animation lasts for one cycle.
- animation-iteration-count:
Defines how many times the animation should repeat (or set it to infinite
for endless repetition).
Conclusion:
CSS animations are a powerful tool to enhance web design. By mastering the @keyframes rule and the animation property, you can create smooth transitions, animations, and dynamic effects to engage users. The bouncing ball animation is a simple yet effective way to demonstrate how these concepts work in practice.
