Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Bouncing Ball Animation

    @shristi.nawani
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 935
    Comment on it

    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.

    html css css3 Animation keyframe bouncing 3d animation
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: