OSCILLATION ANIMATION
In this tutorial we have created web
program that will show you OSCILLATION animation. You will find that Newton's
rule i.e. " FOR EVERY ACTION THERE IS EQUAL AND OPPOSITE REACTION " is
following by our code. We have use ANIMATION property of CSS and we have
created this Program.
PROGRAM SOURCE CODE :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<title>Design a Simple Website Project</title>
<!-------------------------- CSS start------------------------------->
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
}
body{
background-color: #000099;
overflow-x:hidden;
}
.main-div{
width: 100vw;
height: 100vh;
display: grid;
place-items:center;
}
.center-div{
width: 80%;
height: 60%;
background-color: #000;
border: 1rem solid gold;
position: relative;
}
ul{
position: absolute;
top:0%;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
}
li{
list-style-type: none;
width: .6rem;
height: 20rem;
background-color: #fff;
transform-origin: top;
}
li::before{
content: " ";
width: 4rem;
height: 4rem;
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 105%;
transform: translate(-40%,-50%);
}
li:first-child{
margin: 0rem 3rem;
animation: aone 2s linear infinite;
}
@keyframes aone{
0%{
transform: rotate(0deg);
}
20%{
transform: rotate(60deg);
}
50%{
transform: rotate(0deg);
}
100%{
transform: rotate(0deg);
}
}
li:last-child{
animation: atwo 2s linear infinite;
animation-delay: 1s;
}
@keyframes atwo{
0%{
transform: rotate(0deg);
}
20%{
transform: rotate(-60deg);
}
50%{
transform: rotate(0deg);
}
100%{
transform: rotate(0deg);
}
}
@media(max-width: 800px){
html{
font-size: 50%;
}
}
</style>
<!-------------------------- CSS End ------------------------------->
</head>
<body>
<div class="main-div">
<div class="center-div">
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
OUTPUT :-
( NOTE : - While executing program you have to replace links of images , audio's or video's in this program by your links. So take care of it ! )![]()
