Hello, Readers!
Here in this blog, we can see the power of css3, by using only CSS. This bouncing ball will give the effects of bounce and touches its shadow, this will be possible by using Keyframe and animation. We have here three main div working as a parent and the ball or shadow will be considered as the child of the main div. The main div contains the height and width of the screen and positioned it to the middle of the screen. While the ball and shadow div will be used for giving the shape to it, for animation we used animation-delay property, this value is defined in seconds (s) or milliseconds (ms).
Complete Source Code
<!DOCTYPE html>
<html>
<head>
<title>Example of animation using CSS3</title>
<style>
html,
body {
height: 100%;
}
body {
background: #fff;
background: radial-gradient(#fff, #ccc);
}
.wrap {
bottom: 130px;
margin-left: -50px;
position: absolute;
width: 100px;
}
.red { left: 25%; }
.green { left: 50%; }
.blue { left: 75%; }
.ball,.shadow {
border-radius: 100%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
.ball {
animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
height: 50px;
width: 50px;
}
.red .ball { background: linear-gradient(#e55, #b00); }
.green .ball { background: linear-gradient(#5d5, #0a0); }
.blue .ball { background: linear-gradient(#59e, #04b); }
.shadow {
animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
background: #000;
bottom: -90px;
height: 25px;
width: 75px;
}
.red .ball,.red .shadow { animation-delay: -200ms; }
.green .ball,.green .shadow { animation-delay: -100ms; }
.blue .ball,.blue .shadow { animation-delay: 0; }
@keyframes ball {
0% {
transform: translateY( 0 );
}
100% {
transform: translateY( -150px );
}
}
@keyframes shadow {
0% {
opacity: 0.2;
transform: scale( 0.75 );
}
100% {
opacity: 0.05;
transform: scale( 1 );
}
}
</style>
</head>
<body>
<div class="wrap red">
<div class="shadow"></div>
<div class="ball"></div>
</div>
<div class="wrap green">
<div class="shadow"></div>
<div class="ball"></div>
</div>
<div class="wrap blue">
<div class="shadow"></div>
<div class="ball"></div>
</div>
</body>
</html>
Output: Download the link below for getting the output to your Screen.
0 Comment(s)