<!DOCTYPE html>
<html>
<head>
<style>
#mainContent {
background-color:
#A2BFCE;
border-radius: 4px;
padding: 10px;
width: 600px;
height: 300px;
overflow: hidden;
}
.cloud {
position:
absolute;
}
#bigcloud {
animation: bobble
2s infinite;
margin-left: 100px;
margin-top: 15px;
}
#smallcloud {
animation: bobbleways
3s infinite;
margin-top: 65px;
margin-left: 200px;
}
body {
display:
flex;
justify-content: center;
align-items: center;
}
.shape {
width:
80px;
height:
80px;
background-color: rgb(57, 150, 238);
border-radius: 50%;
animation:
bouncingCloudAnimation 0.8s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(.4, 0.06, 1, .6);
animation-iteration-count: infinite;
}
/* we will make
diagonal bounce to the ball */
@keyframes
bobble {
0%
{
transform:
translate3d(50px, 40px, 0px);
animation-timing-function:
ease-in;
}
50%
{
transform:
translate3d(50px, 60px, 0px);
animation-timing-function:
ease-out;
}
100%
{
transform:
translate3d(50px, 40px, 0px);
}
}
@keyframes bobbleways {
0%
{
transform:
translate3d(50px, 40px, 30px);
animation-timing-function:
ease-in;
}
50%
{
transform:
translate3d(50px, 80px, 40px);
animation-timing-function:
ease-out;
}
100%
{
transform:
translate3d(50px, 40px, 30px);
}
}
</style>
</head>
<body>
<!-- this div
will be desinged as a ball which will have bounce effect -->
<div
id="mainContent">
<img
id="bigcloud" alt="#" class="cloud"
height="154"
src="https://www.kirupa.com/images/bigCloud.png"
width="238">
<img
id="smallcloud" alt="#" class="cloud"
height="103"
src="https://www.kirupa.com/images/smallCloud.png"
width="158">
</div>
</body>
</html>
0 Comments