How To Create Animated Mobile Screen Bounce Effect Using HTML5 And CSS3

Posted By Rohit Goyal | 30-Mar-2018
Today I will share an amazing mobile screen bounce in/out effect. That I personally like very much.It's really exciting.This is the brilliant mobile screen animation with fully explained for understanding the logic.I will explain the code to you.
 
 Let's start:-
 
 The technology you need:- HTML and CSS3 
 
 Step 1:- Include the HTML -   
                
<div class="mobile-cover">
  <div class="mobile-container">
    <div class="banner-cover">
      <div class="first-screen-cover"><img src="images/screen1.png"/></div>
      <div class="second-screen-cover"><img src="images/screen2.png"/></div>
      <div class="third-screen-cover"><img src="images/mobile.png"/></div>
</div> 
</div>
</div>
 
You need three images for that:-
 
i.e :-   screen1.png, screen2.png, mobile.png
 
you can grab these images from => https://jsfiddle.net/rohitgoyal9293/e0dv7cay/3/
   
 Step 2:- Include the CSS -
 
(i) Structure:-
 
Add the code below in your CSS:-
                
.mobile-cover{background:#4CBDD7;}
.mobile-container{width:1180px;margin:0 auto;}
.banner-cover{position: relative;height:1000px;margin-left:80px;}
 First of all, we take a  mobile cover and inside it, we take a mobile container and sets the margin:0 auto. By the help of this property, mobile-container will take equal margin from left and right.Inside mobile-container, we will take a banner-cover that will cover our 3 screens.
 
 
(ii) Animation of screen 1:-
   
  In css3 keyframe is used for defining the animation from start to end.   hvr-bob-one is the keyframe for the first screen.
        
        Case- I:- At 0% animation
        => At 0% animation translateY(-100px) give -100px rise to screen1. 
        
        Case- II:- At 50% animation
        => At 50% animation translateY(-50px) the translation is reduced by -50px   . 
        
        Case- III:- At 100% animation
        => At completion of  animation translateY(-100px) the screen1 regain its orginal position same as the
         state of 0% animation.
        
        Note:- We have to make a separate keyframe for the chrome and firefox for compatibility. 
   
      Add the code below in your CSS:-
 
@-keyframes hvr-bob-one {
0% {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
 transform: translateY(-100px);
}
50% {
 -webkit-transform: translateY(-50px);
-moz-transform: translateY(-50px);
 transform: translateY(-50px);
}
100% {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
transform: translateY(-100px);
}
}
@-webkit-keyframes hvr-bob-one {
  0% {
   -webkit-transform: translateY(-100px);
   transform: translateY(-100px);
  }
 50% {
 -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
}
100% {
 -webkit-transform: translateY(-100px);
  transform: translateY(-100px);
}
}
@-moz-keyframes hvr-bob-one {
 0% {
   -moz-transform: translateY(-100px);
   transform: translateY(-100px);
}
50% {
-moz-transform: translateY(-50px);
transform: translateY(-50px);
} 
100% {
  -moz-transform: translateY(-100px);
  transform: translateY(-100px);
}
}
 
  
  (iii) Animation of screen2:-
   
        same as the scree1 we have to the give animation for screen2.
        hvr-bob-two is the keyframe for the second screen.
        
        Case- I:- At 0% animation
        => At 0% animation translateY(-50px) give -50px rise to screen1. 
        
        Case- II:- At 50% animation
        => At 50% animation translateY(-25px) the translation is reduced by -25px   . 
        
        Case- III:- At 100% animation
        => At completion of  animation translateY(-50px) the screen2 regain its orginal position same as the
         state of 0% animation.
        
      
  Add the code below in your CSS:-
@keyframes hvr-bob-two {
0% {
 -moz-transform: translateY(-50px);
-webkit-transform: translateY(-50px);
 transform: translateY(-50px);
 }
50% {
  -moz-transform: translateY(-25px);
  -webkit-transform: translateY(-25px);
   transform: translateY(-25px);
}
100% { 
  -moz-transform: translateY(-50px);
  -webkit-transform: translateY(-50px);
   transform: translateY(-50px);
}
}
@-webkit-keyframes hvr-bob-two {
  0% {
   -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }
 50% {
  -webkit-transform: translateY(-25px);
  transform: translateY(-25px);
}
100% { 
  -webkit-transform: translateY(-50px);
   transform: translateY(-50px);
}
}
@-moz-keyframes hvr-bob-two {
  0% {
   -moz-transform: translateY(-50px);
   transform: translateY(-50px);
}
50% {
  -moz-transform: translateY(-25px);
   transform: translateY(-25px);
}
100% { 
  -moz-transform: translateY(-50px);
   transform: translateY(-50px);
}
}
  (iv) The positioning of screens:-
  
    Now we have to set the position of all screen.By giving its position to absolute and adjusting the position from the top and left. Also, we have to give "animation-duration"    which will define the total time for the animation, "animation-delay" by which we can set the delay to the animation, animation-iteration which will count the animation, animation-timing-function,animation-fill-mode, and animation-direction.
   
 Add the CSS given below:-  
               
.first-screen-cover{
position: absolute;
top:12%;
left:12%;
z-index: 3;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-animation-name: hvr-bob-float-one, hvr-bob-one;
 -moz-animation-name: hvr-bob-float-one, hvr-bob-one;
animation-name: hvr-bob-float-one, hvr-bob-one;
-webkit-animation-duration: .3s, 1.5s;
 -moz-animation-duration: .3s, 1.5s;
 animation-duration: .3s, 1.5s;
 -webkit-animation-delay: 0s, .3s;
-moz-animation-delay: 0s, .3s;
animation-delay: 0s, .3s;
-webkit-animation-timing-function: ease-out, ease-in-out;
-moz-animation-timing-function: ease-out, ease-in-out;
animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
-moz-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards;
 -moz-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
 -webkit-animation-direction: normal, alternate;
-moz-animation-direction: normal, alternate;
 animation-direction: normal, alternate;
}
.second-screen-cover{ 
position: absolute; 
top:20%;
left:12%;
z-index: 2; 
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-animation-name: hvr-bob-float-two, hvr-bob-two;
-moz-animation-name: hvr-bob-float-two, hvr-bob-two;
 animation-name: hvr-bob-float-two, hvr-bob-two;
-webkit-animation-duration: .3s, 1.5s;
-moz-animation-duration: .3s, 1.5s;
 animation-duration: .3s, 1.5s;
-webkit-animation-delay: 0s, .3s;
 -moz-animation-delay: 0s, .3s;
animation-delay: 0s, .3s;
-webkit-animation-timing-function: ease-out, ease-in-out;
-moz-animation-timing-function: ease-out, ease-in-out;
 animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
-moz-animation-iteration-count: 1, infinite;
 animation-iteration-count: 1, infinite;
 -webkit-animation-fill-mode: forwards;
 -moz-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
-webkit-animation-direction: normal, alternate;
 -moz-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}
(v) No animation in third screen:-
 
Third screen is our mobile screen. we don't give any animation in third screen
Add the css given below:-
 
.third-screen-cover{
  position: absolute;
  top:20%;
  z-index: 1;
}
 
Great.... You'r done !
 
Now we end up with amazing mobile screen Bounce in/out effect.
 
You can watch the demo at => https://jsfiddle.net/rohitgoyal9293/e0dv7cay/3/
 
Note:- The above code is tested on the latest version of firefox and google chrome.
Request for Proposal

Recaptcha is required.

Sending message..