bounce ball simple animation
source code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bounce ball</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<div class="box1 box"></div>
<div class="box2 box"></div>
<div class="box3 box"></div>
</div></body>
</html>
CSS
.main .box {
height: 100px;
width: 100px;
border-radius: 50%;
margin: 20px;
}
.main {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
background-color: blue;
animation: meraanimation 1s linear 0s infinite alternate-reverse;
}
.box2 {
background-color: red;
animation: meraanimation 1s linear 0s infinite alternate;
}
.box3 {
background-color: green;
animation: meraanimation 1s linear 0s infinite alternate-reverse;
}
@keyframes meraanimation {
from {
transform: translateY(300px);
}
to {
transform: translateY(-100px);
}
}
Comments
Post a Comment