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.

*animation opened in the Safari browser.
To see the live output of the animation click here.

Step1.

Add HTML

<div class="container">
  <div class="express">
    <div class="top"></div>
    <div class="buttons"></div>
    <div class="logo"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
    <div class="buttons2"></div>
    <div class="coffeepod"></div>
    <div class="coffee"></div>
    <div class="milk"></div>
    <div class="cup">
    <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>
</div>

Step2.

Add CSS

Set the size and the colour of the background, and the container.

body {
  background-color: #CD6155;
  height: 100vh;
  
}
.container {
  position: relative;
  left:40%;
  top: 50px;
  
}

Style the coffee express:

.express {
  position: relative;
  
}
.top {
  position: absolute;
  background-color: #C2C1C1;
  width: 220px;
  height: 140px;
  border-radius: 30px;
  overflow:hidden;
  
}
.top:after {
  position: absolute;
  content:"";
  background-color:#E5E8E8;
  width:180px;
  height: 160px;
  left:20px;
  box-shadow:inset 5px 5px 0 rgba(0,0,0,0.07);
  
}
.middle {
  position: absolute;
  background-color: #b2b2b2;
  width:190px;
  height:180px;
  top:130px;
  left:15px;
  z-index:-1;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.middle:after {
  content:"";
  background-color: #A22C20;
  width:220px;
  height:20px;
  position: absolute;
  top:160px;
  left:-15px;
  border-radius: 10px 10px 0 0;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.middle:before {
  content:"";
  position: absolute;
  background-color: #949494;
  width: 150px;
  height: 170px;
  left:20px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.bottom {
  position: absolute;
  background-color: #E74C3C;
  width: 260px;
  height: 60px;
  top:310px;
  left:-21px;
  border-radius:20px 20px 0 0;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  
}
.bottom:after {
  content:"";
  position: absolute;
  background-color: #292929;
  width: 260px;
  height: 15px;
  border-radius: 0 0 10px 10px;
  top:60px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}
.bottom:before {
  content:"";
  position: absolute;
  background-color: #292929;
  width: 290px;
  height: 15px;
  top:70px;
  left: -16px;
  border-radius:20px;
  opacity:0.5;
}
CSS Coffee Express

Add the logo:

.logo {
  background-color: #F08080;
  display: inline-block;
  height: 30px;
  margin: 0 10px;
  position: relative;
  top: 50px;
  left: 85px;
  transform: rotate(-45deg);
  width: 30px;
  
}

.logo:before,
.logo:after {
  content: "";
  background-color: #F08080;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
  box-shadow:inset -2px 2px 0 #EC7063;
}

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

.logo:after {
  left: 15px;
  top: 0;
}

and the buttons:

.buttons {
  position: absolute;
  border-radius: 50%;
  background-color: #A9CCE3;
  width: 20px;
  height: 20px;
  border: 4px solid #292929;
  top: 100px;
  left: 60px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  
}
.buttons:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #A9CCE3;
  width: 20px;
  height: 20px;
  border: 4px solid #292929;
  top: -3px;
  left: 30px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  
}
.buttons:before {
  content:"";
  position: absolute;
  border-radius: 50%;
  background-color: #A9CCE3;
  width: 20px;
  height: 20px;
  border: 4px solid #292929;
  top: -3px;
  left: 65px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  
}
.buttons2 {
  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:330px;
  left: 50px;
}
.buttons2: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);
  left: 50px;
  top:-2px;
}
.buttons2:before {
  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);
  left: 100px;
  top:-2px;
}
CSS Coffee

Coffee pod:

.coffeepod {
  position: absolute;
  width: 80px;
  height: 20px;
  background-color:#D7D7D7;
  top:140px; 
  left: 70px;
  border-radius: 0 0 20px 20px;
  box-shadow:inset 3px -5px 0 rgba(0,0,0,0.07);
}
.coffeepod:after {
  content:"";
  position: absolute;
  background-color: #292929;
  width:50px;
  height: 10px;
  top:20px;
  left:15px;
  border-radius: 0 0 5px 5px;
  
}

Coffee and milk:

.coffee {
  position: absolute;
  background-color: #292929;
  width: 10px;
  height: 20px;
  border-radius: 2px;
  top: 160px;
  left:95px;
}
.coffee:after {
  content:"";
  position: absolute;
  width: 6px;
  height: 65px;
  opacity: 0;
  top: 20px;
  left: 2px;
  background-color: #472708;
  animation: milk 5s linear;
  animation-delay: 5s;
}
.milk {
  position: absolute;
  background-color: #292929;
  width: 10px;
  height: 20px;
  border-radius: 2px;
  top: 160px;
  left:115px;
}

.milk:after {
  content:"";
  position: absolute;
  width: 6px;
  height: 65px;
  opacity: 0;
  top: 20px;
  left: 2px;
  background-color: white;
  animation: milk 4s linear;
  animation-delay: 4s;
}
CSS Coffee Machine

The Coffee Express is ready. Now, it is time to add the cup:

.cup {
  position: absolute;
  background-color:#292929;
  width: 70px;
  height: 5px;
  top: 285px;
  left: 75px;
  border-radius: 5px 5px 0 0;
}
.cup:after {
  position: absolute;
  content:"";
  background-color: #2874A6;
  width: 70px;
  height: 50px;
  border-radius: 5px 5px 30px 30px;
  box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
  top:-49px;
}
.cup:before {
  position: absolute;
  content:"";
  border: 8px solid #2874A6;
  border-radius: 50%;
  width: 20px;
  height: 15px;
  top:-46px;
  left:55px;
  
}
CSS Coffee Machine

Steam:

#steam {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #F3F1E7;
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  top: -20px;
  left: 30%;
}
.steam1 {
  animation: steam1 5s ease-out infinite; 
}
.steam3 {
  animation: steam1 4s ease-out 2s infinite; 
}
.steam2 {
  animation: steam2 1s ease-out 0.5s infinite; 
}
.steam4 {
  animation: steam2 2s ease-out 1.5s infinite; 
}

Step3.

Add CSS Animation

To fill the cup:

@keyframes milk {
  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.3);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-80px) translateX(10px) scale(1);
    opacity: 0;
  }
}
@keyframes steam2{
  0%{
    transform: translateY(0) translateX(0) scale(0.4);
    opacity: 0.25;
  }
  100%{
    transform: translateY(-90px) translateX(-10px) scale(1);
    opacity: 0;
  }
}

To see the live output of the animation visit lenastanley.com.

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *