Assignments Of Class 21: CSS Animations
Assignment 1: Create a Simple Fade-In Animation
Objective: Create a fade-in effect on an element using CSS animation.
Instructions:
1. Create a div element with the class name .box.
2. Apply an animation to make the box fade in from transparent to fully visible.
Step-by-Step Solution:
1. HTML Structure:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fade-In Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
2. CSS Styling:
css
CopyEdit
.box {
width: 100px;
height: 100px;
background-color: red;
opacity: 0; /* Initially hidden */
animation: fadeIn 2s ease-in forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Explanation:
- The .box element starts with opacity: 0, making it invisible.
- The @keyframes rule defines the fade-in animation from opacity: 0 to opacity: 1.
- The animation property is used to apply the animation with a duration of 2s, easing function ease-in, and the forwards value to keep the final state after the animation ends.
Assignment 2: Create a Slide-In Animation from the Left
Objective: Animate an element to slide in from the left.
Instructions:
1. Create a div element with the class name .slider.
2. Apply an animation to make the box slide in from the left edge of the screen.
Step-by-Step Solution:
1. HTML Structure:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slide-In Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="slider"></div>
</body>
</html>
2. CSS Styling:
css
CopyEdit
.slider {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: -200px; /* Start off-screen */
animation: slideIn 2s ease-in-out forwards;
}
@keyframes slideIn {
0% {
left: -200px;
}
100% {
left: 50px; /* Final position */
}
}
Explanation:
- The .slider element starts positioned off-screen with left: -200px.
- The @keyframes rule animates the element from left: -200px to left: 50px, sliding it in from the left.
- The forwards keyword ensures the box remains at its final position after the animation ends.
Assignment 3: Create a Bouncing Ball Animation
Objective: Create an animation where a ball bounces up and down.
Instructions:
1. Create a div element with the class name .ball.
2. Apply an animation to make the ball bounce up and down vertically.
Step-by-Step Solution:
1. HTML Structure:
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:
css
CopyEdit
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-end;
background-color: #f0f0f0;
}
.ball {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-100px); /* Move up */
}
100% {
transform: translateY(0); /* Return to start */
}
}
Explanation:
- The .ball element is styled as a red circle and animated with the bounce animation.
- The @keyframes rule makes the ball move up (translateY(-100px)) and return to its original position.
- The infinite value in the animation property makes the ball bounce endlessly.
Assignment 4: Create a Color Changing Animation
Objective: Animate the background color of an element.
Instructions:
1. Create a div element with the class name .colorBox.
2. Apply an animation to change its background color from blue to green.
Step-by-Step Solution:
1. HTML Structure:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Changing Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="colorBox"></div>
</body>
</html>
2. CSS Styling:
css
CopyEdit
.colorBox {
width: 200px;
height: 200px;
background-color: blue;
animation: changeColor 3s infinite alternate;
}
@keyframes changeColor {
0% {
background-color: blue;
}
100% {
background-color: green;
}
}
Explanation:
- The .colorBox element starts with a blue background.
- The @keyframes rule changes the background color from blue to green.
- The alternate value in animation causes the animation to alternate between blue and green.
Assignment 5: Create a Rotate Animation
Objective: Create an animation that rotates an element.
Instructions:
1. Create a div element with the class name .rotateBox.
2. Apply an animation to rotate the box continuously.
Step-by-Step Solution:
1. HTML Structure:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotate Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="rotateBox"></div>
</body>
</html>
2. CSS Styling:
css
CopyEdit
.rotateBox {
width: 100px;
height: 100px;
background-color: purple;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Explanation:
- The .rotateBox element rotates from 0deg to 360deg, completing one full rotation.
- The infinite keyword ensures the rotation keeps repeating indefinitely.
Assignment 6: Create a Zoom-In Animation
Objective: Animate an element to zoom in.
Instructions:
1. Create a div element with the class name .zoomBox.
2. Apply an animation to zoom the box from a smaller size to its normal size.
Step-by-Step Solution:
1. HTML Structure:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zoom-In Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="zoomBox"></div>
</body>
</html>
2. CSS Styling:
css
CopyEdit
.zoomBox {
width: 100px;
height: 100px;
background-color: green;
transform: scale(0);
animation: zoomIn 2s ease-in-out forwards;
}
@keyframes zoomIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
Explanation:
- The .zoomBox starts with a scale(0) transform (shrunk down).
- The @keyframes rule animates the scaling from 0 to 1, gradually zooming the element in.
Assignment 7: Create a Flip Animation
Objective: Create a 3D flip animation.
Instructions:
1. Create a div element with the class name .flipBox.
2. Apply an animation to flip the box along the Y-axis.
Step-by-Step Solution:
1. HTML Structure:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flip Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flipBox"></div>
</body>
</html>
2. CSS Styling:
css
CopyEdit
.flipBox {
width: 100px;
height: 100px;
background-color: yellow;
transform-style: preserve-3d;
animation: flip 2s infinite;
}
@keyframes flip {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
Explanation:
- The .flipBox element rotates around the Y-axis.
- The @keyframes rule animates the element's rotation from 0 to 180 degrees and back to 360 degrees.
Assignment 8: Create a Grow and Shrink Animation
Objective: Animate an element to grow and shrink repeatedly.
Instructions:
1. Create a div element with the class name .growShrinkBox.
2. Apply an animation to make the box grow and shrink.
Step-by-Step Solution:
1. HTML Structure:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grow and Shrink Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="growShrinkBox"></div>
</body>
</html>
2. CSS Styling:
css
CopyEdit
.growShrinkBox {
width: 100px;
height: 100px;
background-color: orange;
animation: growShrink 2s ease-in-out infinite;
}
@keyframes growShrink {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
Explanation:
- The .growShrinkBox element alternates between its normal size and a larger size (1.5 times its original size).
- The animation property makes the box grow and shrink infinitely.
Assignment 9: Create a Pulse Animation
Objective: Create a pulsing effect for an element.
Instructions:
1. Create a div element with the class name .pulseBox.
2. Apply an animation to make the element pulse (grow and shrink).
Step-by-Step Solution:
1. HTML Structure:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulse Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="pulseBox"></div>
</body>
</html>
2. CSS Styling:
css
CopyEdit
.pulseBox {
width: 100px;
height: 100px;
background-color: pink;
border-radius: 50%;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
Explanation:
- The .pulseBox element pulses by growing to 120% and then returning to its original size.
- The animation occurs infinitely with a duration of 1.5 seconds.
Assignment 10: Create a Shake Animation
Objective: Create a shaking effect on an element.
Instructions:
1. Create a div element with the class name .shakeBox.
2. Apply an animation to make the element shake horizontally.
Step-by-Step Solution:
1. HTML Structure:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shake Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="shakeBox"></div>
</body>
</html>
2. CSS Styling:
css
CopyEdit
.shakeBox {
width: 100px;
height: 100px;
background-color: black;
animation: shake 0.5s ease-in-out infinite;
}
@keyframes shake {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-10px);
}
50% {
transform: translateX(10px);
}
75% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
Explanation:
- The .shakeBox element shakes horizontally by translating left and right.
- The animation property applies the shake effect, causing the element to move back and forth in 0.5 seconds.
No comments:
Post a Comment