BOUNCE ANIMATION :- (VIDEO48)
SOURCE CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise 8 - Bounce Animation</title>
<style>
*{
margin: 0;
padding: 0;
}
.container {
background-color: rgb(255, 255, 255);
height: 90vh;
width: 90vw;
position: relative;
}
.ball {
background-color: red;
height: 100px;
width: 100px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 70PX;
/* animation:animationX 3s linear infinite, animationY 1s ease-out infinite alternate; */
animation: animateX 8s linear infinite, animateY 0.7s ease-out infinite alternate;
}
.ball1{
animation: animateX 3s linear infinite, animateY 1.5s ease-out infinite alternate;
background-color: chartreuse;
height: 100px;
width: 100px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 70PX;
}
.ball2{
animation: animateX 5s linear infinite, animateY 0.9s ease-out infinite alternate;
background-color: rgb(255, 242, 0);
height: 100px;
width: 100px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 70PX;
}
.ball3{
animation: animateX 7s linear infinite, animateY 1s ease-out infinite alternate;
background-color: rgb(0, 115, 255);
height: 100px;
width: 100px;
position: absolute;
bottom: 0;
left: 0;
border-radius: 70PX;
}
@keyframes animateX {
from {
left: 0;
}
to {
left: 100%;
}
}
@keyframes animateY {
from{
bottom: 0;
}
to{
bottom: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="ball">
</div>
<div class="ball1">
</div>
<div class="ball2">
</div>
<div class="ball3">
</div>
</div>
</body>
</html>
Comments
Post a Comment