CSS Animations with Example
Learn about CSS animations with example. Master key techniques to create engaging, dynamic web elements and elevate your web design skills effortlessly. There are several important points to consider:
1. Keyframes
Keyframes define the start and end points of an animation, and any intermediate points, allowing for smooth transitions between different states.
2. Timing Functions
Timing functions (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier) define the speed curve of the animation.
3. Animation Fill Mode
This property defines the style of the element when the animation is not playing (before it starts after it ends, or both).
4. Duration and Delay
Duration specifies how long the animation takes to complete one cycle, while delay defines the time before the animation starts.
5. Iteration Count
It can be set to a specific number or to infinite for continuous looping.
6. Transformations
to change the position, size, and orientation of an element using translate, scale, rotate, and skew are used
7. Accessibility
Provide options to reduce or disable animations.
8. Combining Multiple Animations
Multiple animations can be combined on a single element by separating them with commas.
9. Performance Considerations
Use CSS over JavaScript for animations when possible, as CSS animations are generally more performant.
Avoid heavy animations on large elements or those with complex DOM structures, as this can cause jank and degrade the user experience.
Hardware acceleration can be triggered using transform and opacity properties, leading to smoother animations.
For Example:
a car animation using HTML and CSS involves using keyframe animations and CSS properties to animate an image or shape of a car. Below is an example to illustrate this:
HTML: Define the structure.
CSS: Add styles and animation.
HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Car Animation</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”road”>
<div class=”car”>
<div class=”top”></div>
<div class=”body”></div>
<div class=”window front-window”></div> <div class=”window back-window”></div> <div class=”wheel front-wheel”></div>
<div class=”wheel back-wheel”></div>
<div class=”bumper”></div>
<div class=”side-mirror left-mirror”></div> <div class=”side-mirror right-mirror”></div> <div class=”headlight left-headlight”></div> <div class=”headlight right-headlight”></div> </div>
</div>
</body>
</html>
Style.css
body {
margin: 0;
overflow: hidden;
background: #87CEEB; /* Sky background */ display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.road {
position: relative;
width: 100%;
height: 200px;
background: #555;
overflow: hidden;
}
.road::before {
content: ”;
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 10px;
background: repeating-linear-gradient(90deg, #fff, #fff 20px, #555 20px, #555 40px); transform: translateY(-50%);
animation: move-road 1s linear infinite;
}
.car {
position: absolute;
bottom: 50px;
width: 200px;
height: 75px;
animation: drive 5s linear infinite;
}
.car .top {
position: absolute;
width: 100px;
height: 40px;
background: red;
border-radius: 10px 10px 0 0; top: 0;
left: 50px;
}
.car .body {
position: absolute;
width: 200px;
height: 50px;
background: red;
border-radius: 0 0 10px 10px; top: 20px;
}
.window {
position: absolute;
width: 40px;
height: 25px;
background: #fff;
border-radius: 5px;
top: 10px;
}
.front-window {
left: 60px;
}
.back-window {
right: 60px;
}
.wheel {
position: absolute;
width: 30px;
height: 30px;
background: black;
border-radius: 50%;
bottom: -15px;
animation: rotate-wheel 0.5s linear infinite; }
.front-wheel {
left: 50px;
}
.back-wheel {
right: 50px;
}
.bumper {
position: absolute;
width: 150px;
height: 10px;
background: #333; bottom: 0;
left: 25px;
border-radius: 5px; }
.side-mirror {
position: absolute; width: 10px;
height: 20px;
background: red; border-radius: 2px; top: 10px;
}
.left-mirror {
left: 35px;
}
.right-mirror {
right: 35px;
}
.headlight {
position: absolute; width: 10px;
height: 10px;
background: yellow;
border-radius: 50%;
top: 30px;
}
.left-headlight {
left: 10px;
}
.right-headlight {
right: 10px;
}
@keyframes drive {
0% {
left: -200px;
}
100% {
left: 100%;
}
}
@keyframes rotate-wheel { 0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); }
}
@keyframes move-road {
0% {
background-position: 0 0;
}
100% {
background-position: 40px 0;
}
}
Explanation
HTML Structure:
The div with class car contains additional div elements for the top part of the car (top) and the body of the car (body).
Windows, wheels, and headlights are positioned within the car element.
CSS Styles:
body: Centers the road and car in the viewport.
.road: Defines the road with a dark background and a dashed line using a pseudo-element. The line animates to create a moving effect.
.car: Sets the size and animation for the car.
.car .top: Styles the top part of the car with a red background and rounded corners. .car .body: Styles the body of the car with a red background and rounded corners. .window: Styles the car windows with a white background and rounded corners. .wheel: Styles the car wheels with a black background and animates them to rotate. .headlight: Styles the headlights with a yellow background and rounded corners.
@keyframes drive: Animates the car moving from left to right. @keyframes rotate-wheel: Animates the wheels rotating.
@keyframes move-road: Animates the dashed road line to create a moving effect.
Do visit our channel to know more: Click Here
Author:-
Pooja Ghodekar
Call the Trainer and Book your free demo Class For Web Development Call now!!!
| SevenMentor Pvt Ltd.
© Copyright 2021 | SevenMentor Pvt Ltd.