Interesting CSS bounce animation

This is a small animation that only uses a div to do. It's just done by using the animation of CSS3. It's like a square bouncing on the ground. When it touches the ground, the sharp corner will be compressed and rounded, and the shadow part will also shrink with the square rising. As for how to finish it? Let's go on.

Using pseudo elements

Because only one div is used, in order to achieve the effect of square rotation and shadow scaling at the same time, two pseudo elements (before and after) must be used here. Strictly speaking, although there is only one div, this div is used as the outer frame, the pseudo element before is used as the rotating square, and the pseudo element after is used as the shadow.

.box{
  position:relative;

}
.box:before{
  content:'';
  position:absolute;
  z-index:2;
  top:60px;
  left:50px;
  width:50px;
  height:50px;
  background:#c00;
  border-radius:2px;
  transform: rotate(45deg);
}
.box:after{
  content:'';
  position:absolute;
  z-index:1;
  top:128px;
  left:52px;
  width:44px;
  height:3px;
  background:#eaeaea;
  border-radius:100%;
}

CSS animation

After drawing the square and shadow, the next step is to make animation. To avoid too much complexity, let's not rotate here, just let the square jump up and down, and then the shadow will enlarge and shrink. In the animation of the following example, another 20% and 80% keyframe s are added, so that the corner will be round when it contacts, or it will become the sharp corner when it starts to move It's weird to be round.

.box:before{
  content:'';
  position:absolute;
  z-index:2;
  top:60px;
  left:50px;
  width:50px;
  height:50px;
  background:#c00;
  border-radius:2px;
  transform: rotate(45deg);
  -webkit-animation:box .8s infinite ; 
}
@-webkit-keyframes box{
  0%{
    top:50px;
  }
  20%{
    border-radius:2px;  /*It started to deform 20% of the time*/
  }
  50%{
    top:80px; 
    border-bottom-right-radius:25px;
  }
  80%{
    border-radius:2px;  /*To 80% of the places*/
  }
  100%{
    top:50px;
  }
}
.box:after{
  content:'';
  position:absolute;
  z-index:1;
  top:128px;
  left:52px;
  width:44px;
  height:3px;
  background:#eaeaea;
  border-radius:100%;
  -webkit-animation:shadow .8s infinite ; 
}
@-webkit-keyframes shadow{
  0%,100%{
    left:54px;
    width:40px;
    background:#eaeaea;
  }
  50%{
    top:126px;
    left:50px;   /*Keep shadows in place*/
    width:50px;
    height:7px;
    background:#eee;
  }
}

Add rotation effect

After understanding the principle, we only need to add the attribute of rotation to achieve the effect of rotation when bouncing up, but here is a small skill, that is, 90 degrees to 45 degrees when falling down, 45 degrees to 0 degrees when bouncing up, and then 90 degrees (100% to 0%) from 0 degrees in this instant. In this way, we will have an illusion, feeling like It's spinning all the time.

@-webkit-keyframes box{
  0%{
    top:50px;
    transform: rotate(90deg); /**/
  }
  20%{
    border-radius:2px;
  }
  50%{
    top:80px; 
    transform: rotate(45deg);
    border-bottom-right-radius:25px;
  }
  80%{
    border-radius:2px;
  }
  100%{
    top:50px;
    transform: rotate(0deg);
  }
}

We can also reverse the angle and jump to the other side.

If we add linear to the animation, it will become a linear continuous way.

Tags: Front-end css3 Attribute

Posted on Sat, 16 Nov 2019 14:54:44 -0500 by Accurax