Categories
CSS Web development

CSS Coffee Express Animation

It’s Monday… but it’s OK. Fancy some Coffee?

CSS Coffee Express

To create the CSS Coffee Express animation follow the steps below and watch the video tutorial.

Demo:

*to see the CSS Coffee Express Animation on the website click here.

Step1.

Add HTML

<div class="coffee-express">
  <div class="express">
    <div class="base">
      <div class="buttons"></div>
    </div>
    <div class="panel">
      <div class="button"></div>
      <div class="logo"></div>
    </div>
    <div class="coffeepod"></div>
    <div class="drinks"></div>
    <div class="cup"></div>
    <div id="wrap">
  <div id="steam" class="steam1"></div>
  <div id="steam" class="steam2"></div>
  <div id="steam" class="steam3"></div>
  <div id="steam" class="steam4"></div>
  </div>
</div>
</div>

Step2.

Add CSS

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

body {
  background-color: #0a9396;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

.coffee-express {
  position: relative; 
}

Style the coffee express:

.express {
  position: relative;
  background-color: #b2b2b2;
  width:190px;
  height:180px;
  top:20px;
  left:0;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

.express:before {
  content:"";
  position: absolute;
  background-color: #C2C1C1;
  width: 220px;
  height: 140px;
  border-radius: 30px; 
  top:-120px;
  left:-15px;
}

.express:after {
  content:"";
  position: absolute;
  background-color: #949494;
  width: 150px;
  height: 170px;
  left:20px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:10px;
}

.base {
  position: absolute;
  background-color: #005f73;
  width: 260px;
  height: 60px;
  top:190px;
  left:-35px;
  border-radius:20px 20px 0 0;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);  
  z-index:5;
}

.base:before {
  content:"";
  background-color: #94d2bd;
  width:220px;
  height:20px;
  position: absolute;
  top:-20px;
  left:20px;
  border-radius: 10px 10px 0 0;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

.base:after {
  content:"";
  position: absolute;
  background-color: #333;
  width: 260px;
  height: 15px;
  border-radius: 0 0 10px 10px;
  top:60px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

.buttons {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:20px;
  left:80px;
}

.buttons:before, .buttons:after {
  content:"";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 3px solid white;
  border-radius: 50%;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:-3px; 
}

.buttons:before {
  left:40px;
}

.buttons:after {
  left:80px;
}

.panel {
  position: absolute;
  background-color:#E5E8E8;
  width:170px;
  height: 130px;
  left:5px;
  top:-120px;
  z-index:4;
  border-radius:5px;
  border:5px solid rgba(0,0,0,0.15);
}

.panel:before, .panel:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #e9d8a6;
  width: 20px;
  height: 20px;
  border: 4px solid #333;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:80px;
}

.panel:before {
  left: 35px;
}

.panel:after {
  left:75px;
}

.button {
  position: absolute;
  border-radius: 50%;
  background-color: #e9d8a6;
  width: 20px;
  height: 20px;
  border: 4px solid #333;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:80px;
  left:115px;
}

.button:before {
  content:"";
  position: absolute;
  background-color: rgba(0,0,0,0.2);
  width: 290px;
  height: 15px;
  top:290px;
  left:-180px;
  border-radius:20px;
}

.button:after {
  content:"";
  position: absolute;
  background-color:#333;
  width: 70px;
  height: 5px;
  top: 196px;
  left: -65px;
  border-radius: 5px 5px 0 0;
}

.logo {
  background-color: #9b2226;
  height: 15px;
  position: relative;
  top: 40px;
  left: 77px;
  transform: rotate(-45deg);
  width: 15px; 
}

.logo:before,
.logo:after {
  content: "";
  background-color: #9b2226;
  border-radius: 50%;
  height: 15px;
  position: absolute;
  width: 15px;
}

.logo:before {
  top: -7.5px;
  left: 0;
}

.logo:after {
  left: 7.5px;
  top: 0;
}
CSS Coffee Express

Coffee pod:

.coffeepod {
  position: absolute;
  width: 80px;
  height: 20px;
  background-color:#D7D7D7;
  top:20px; 
  left: 60px;
  border-radius: 0 0 20px 20px;
  box-shadow:inset 3px -5px 0 rgba(0,0,0,0.07);
  z-index:9;
}

.coffeepod:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:50px;
  height: 10px;
  top:20px;
  left:15px;
  border-radius: 0 0 5px 5px;  
}

.coffeepod:after {
  content:"";
  position: absolute;
  background-color: #333;
  width: 10px;
  height: 20px;
  border-radius: 2px;
  top:20px;
  left:25px;
  box-shadow: 20px 0 #333;
}
CSS Coffee Express

Coffee and milk:

.drinks {
  position: absolute;
  z-index:8;
}

.drinks:before {
  content:"";
  position: absolute;
  width: 6px;
  height: 65px;
  opacity: 0;
  top: 50px;
  left: 87px;
  background-color: #472708;
  animation: drinks 4s linear;
  animation-delay: 4s;
}

.drinks:after {
  content:"";
  position: absolute;
  width: 6px;
  height: 65px;
  opacity: 0;
  top: 50px;
  left: 107px;
  background-color: white;
  animation: drinks 3s linear;
  animation-delay: 3s;
}

Add the cup:

.cup {
  position: absolute;
  background-color: #ae2012;
  width: 70px;
  height: 50px;
  border-radius: 5px 5px 30px 30px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:115px;
  left:63px;
  z-index:10;
}
.cup:before {
  position: absolute;
  content:"";
  border: 8px solid #ae2012;
  border-radius: 50%;
  width: 20px;
  height: 15px;
  top:6px;
  left:55px; 
}
CSS Coffee Express

Steam:

#steam {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0;
  top: 105px;
  z-index:5;
  left:85px;
}
.steam1 {
  animation: steam1 4.5s ease-out 5s infinite; 
}
.steam3 {
  animation: steam1 3.5s ease-out 7s infinite; 
}

.steam2 {
  animation: steam2 1s ease-out 5.5s infinite; 
}
.steam4 {
  animation: steam2 2s ease-out 7.5s infinite; 
}

Step3.

Add CSS Animation

To fill the cup:

@keyframes drinks {
  0% {height: 0px; opacity: 1;}
  10% {height: 0px; opacity: 1;}
  30% {height: 65px;opacity: 1;}
  80% {height: 65px; opacity: 1;}
  100% {height: 65px; opacity: 0;}
}

and add the steam:

@keyframes steam1{
  0%{
    transform: translateY(0) translateX(0) scale(0.4);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-40px) translateX(10px) scale(1);
    opacity: 0;
  }
}
@keyframes steam2{
  0%{
    transform: translateY(0) translateX(0) scale(0.5);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-30px) translateX(-10px) scale(1);
    opacity: 0;
  }
}

Watch also the video tutorial:

Enjoy coding!