Tag: Bounce

Web development

CSS Bouncing Envelope / Contact Animation

Post author By Lena Stanley
Post date November 19, 2021

To learn how to create the CSS Bouncing Envelope follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="contact-envelope">
  <div class="envelope">
    <div class="envelope-back"></div>
    <div class="message"></div>
    <div class="envelope-front"></div>
  </div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.contact-envelope {
  position: relative;
  border-radius: 50%;
  background-color: #4987f4;
  width:200px;
  height: 200px;
  z-index:-1;
}

Style the envelope:

.envelope {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width:200px;
  height: 200px;
  animation: bounce 1s ease infinite;
}

.envelope-back {
  position: absolute;
  background-color: #e19605;
  width:110px;
  height: 70px;
  top:80px;
  z-index:1;
}

.envelope-back:before {
  content:"";
  position: absolute;
  background-color: #e19605;
  border-radius:10px;
  width: 84px;
  height: 84px;
  top:-39px;
  left:13px;
  transform: rotate(-45deg);
}

.message {
  position: absolute;
  z-index:2;
  background-color: #eae2b7;
  width:90px;
  height: 95px;
}

.message:before {
  content:"";
  position: absolute;
  background-color: #ced4da;
  width: 75px;
  height: 3px;
  left:7.5px;
  top:12px;
  box-shadow: 0 10px #ced4da, 0 20px #ced4da, 0 30px #ced4da, 0 40px #ced4da, 0 50px #ced4da, 0 60px #ced4da, 0 70px #ced4da;
}

.envelope-front:before, .envelope-front {
  position: absolute;
  width:0;
  height:0;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
}

.envelope-front {
  border-right: 60px solid #f9c748;
  z-index:3;
  left:95px;
  top:80px;
}

.envelope-front:before {
  content:"";
  border-left: 60px solid #f9c748;
  left:-50px;
  top:-35px;
}

.envelope-front:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-bottom: 45px solid #fcb933;
  border-left: 55px solid transparent;
  border-right: 55px solid transparent;
  left:-50px;
  top:-10px;
}

Add the shadow:

.shadow {
  position: absolute;
  width: 110px;
  height: 10px;
  background-color: rgba(0,0,0,0.4);
  border-radius:50%;
  top:145px;
  left:45px;
  z-index:-2;
  animation: scale 1s linear infinite;
}

Step3.

Add CSS Animation

 @keyframes bounce {
        0%   { transform: scale(1,1) translateY(0); }
        10%  { transform: scale(1.1,.9) translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-55px);}
        50%  { transform: scale(1.05,.95) translateY(0); }
        58%  { transform: scale(1,1) translateY(-7px); }
        65%  { transform: scale(1,1) translateY(0);}
        100% { transform: scale(1,1) translateY(0);}
    }

@keyframes scale {
  0% {transform: scaleX(1);}
  10% {transform: scaleX(1);}
  30% {transform: scaleX(0.5);}
  50% {transform: scaleX(1.1);}
  58% {transform: scaleX(1);}
  75% {transform: scaleX(0.98);}
  100% {transform: scaleX(1);}
}

Enjoy coding!

Watch also the video tutorial:

Hey, here’s something that might interest you:

CSS Bouncing Text Animation

CSS Bouncing Basketball

Pure CSS Envelope (Open/Close on click)

Tags Bounce, CSS, CSS animation, envelope, HTML

Web development

CSS Bouncing Text Animation

Post author By Lena Stanley
Post date May 18, 2021

Demo:

*to see the animation on the website click here.

To create the CSS Bouncing Text Effect follow the steps below and watch the video tutorial.

Add HTML
Add CSS

Step1.

Add HTML

<div class="bouncing-text">
  <div class="b">B</div>
  <div class="o">O</div>
  <div class="u">U</div>
  <div class="n">N</div>
  <div class="c">C</div>
  <div class="e">E</div>
  <div class="shadow"></div>
  <div class="shadow-two"></div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  height: 100vh;
  align-items: center;
  justify-content:center;
  display: flex;
}

.bouncing-text {
  position: relative;
  display: flex;
  font-size: 70px;
  font-family: arial black;  
}

Style the letters:

.b, .o, .u, .n, .c, .e {
  color: #4cc9f0;
  text-shadow: 0 3px #4361ee, 0 5px #4361ee, 0 7px #4361ee;
}

Add the bounce effect animation:

 @keyframes bounce {
        0%   { transform: scale(1,1) translateY(0); }
        10%  { transform: scale(1.1,.9) translateY(0); }
        30%  { transform: scale(.9,1.1)   translateY(-55px);}
        50%  { transform: scale(1.05,.95) translateY(0); }
        58%  { transform: scale(1,1) translateY(-7px); }
        65%  { transform: scale(1,1) translateY(0);}
        100% { transform: scale(1,1) translateY(0);}
    }

.b {
  animation: bounce 1s ease infinite;
}

.o {
  animation: bounce 1s ease infinite .1s;
}

.u {
  animation: bounce 1s ease infinite .2s;
}

.n {
  animation: bounce 1s ease infinite .3s;
}

.c {
  animation: bounce 1s ease infinite .4s;
}

.e {
  animation: bounce 1s ease infinite .5s;
}

Add the shadow:

.bouncing-text:before, .bouncing-text:after {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.4);
  width: 50px;
  height:5px;
  border-radius:50%;
  top:82px;
  z-index:-1;
}

.shadow, .shadow-two {
  position: absolute;
  top:82px;
  z-index:-1;
}

.shadow:before, .shadow:after, .shadow-two:before, .shadow-two:after {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.4);
  width: 50px;
  height:5px;
  border-radius:50%;
  top:0;  
}

.bouncing-text:before {
  left:0;
  animation: scale 1s linear infinite;
}

@keyframes scale {
  0% {transform: scaleX(1);}
  25% {transform: scaleX(0.4);}
  50% {transform: scaleX(1);}
  75% {transform: scaleX(0.9);}
  100% {transform: scaleX(1);}
}

.bouncing-text:after {
  left: 57px;
  animation: scale 1s linear infinite .1s;
}

.shadow:before {
  left: 116px;
  animation: scale 1s linear infinite .2s;
}

.shadow:after {
  left:175px;
  animation: scale 1s linear infinite .3s;
}

.shadow-two:before {
  left:232px;
  animation: scale 1s linear infinite .4s;
}

.shadow-two:after {
  left: 285px;
  animation: scale 1s linear infinite .5s;
}

Watch also the video tutorial:

Enjoy coding!

CSS Bouncing Basketball

Post author By Lena Stanley
Post date March 29, 2021

Demo:

*to see the animation on the website click here.

To create the CSS Bouncing Basketball follow the steps below and watch the video tutorial:

Step1.

Add HTML

<div class="basketball">
    <div class="ball">
    <div class="lines"></div>
    </div>
  <div class="shadow"></div>
  </div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
}

.basketball {
  position: relative;
  top: 50px;
  left:-50px;
}

Style the ball:

.ball {
  position: absolute;
  background-color: #e76f51;
  border-radius:50%;
  width:100px;
  height:100px;
  overflow: hidden;
  border: 3px solid #333;
  animation: bounce 1.5s ease-in infinite;
}
.ball:before, .ball:after {
  content:"";
  position: absolute;
  background-color: #333;
  width:110px;
  height:3px;
  top:50px;
  left:-5px;
}

.ball:before {
  transform: rotate(45deg);
}

.ball:after {
  transform: rotate(-45deg);
}

.lines {
  position: absolute;
  border-radius:50%;
  border: 3px solid #333;
  width:70px;
  height:70px;
  left:-20px;
  top:-20px;
}

.lines:before {
  content:"";
  position: absolute; 
  border-radius:50%;
  border: 3px solid #333;
  width:70px;
  height:70px;
  top:65px;
  left:60px;
}

Add the shadow:

.shadow {
  position: absolute;
  width:100px;
  height:15px;
  background-color: rgba(0,0,0,0.2);
  border-radius:50%;
  top:95px;
  z-index:-1;
  left:3px;
  animation: scale 1.5s ease-in infinite;
}

Step3.

Add CSS Animation

To make the ball bounce:

@keyframes bounce {
   0% {transform: translate3d(0, 0, 0) rotate(0deg);}
  25% {transform: translate3d(0, -185px, 0) rotate(90deg);}
  50% {transform: translate3d(0, 0, 0) rotate(180deg);}
  75% {transform: translate3d(0, -185px, 0) rotate(270deg);}
  100% {transform: translate3d(0, 0, 0) rotate(360deg);}
}

Scale the shadow:

@keyframes scale {
  0% {transform: scaleX(1);}
  25% {transform: scaleX(0.7);}
  50% {transform: scaleX(1);}
  75% {transform: scaleX(0.7);}
  100% {transform: scaleX(1);}
}

To see the animation on the website go to lenastanley.com.

Watch also the video tutorial:

Enjoy coding!