Build a smokin’ hot coffee cup animation using CSS ☕

Rajesh DN

7 years ago

In this article, I came up with something very cool stuff — Smoking hot coffee cup animation. Ya!! you read it correctly, don’t get confused just check out the above GIF, looks great right? So here I’m going to show you guys how to create the Smoking hot coffee cup using CSS3 Keyframe Animations.

I tried to create the smoke animation effect using box-shadow and CSS3 Keyframe Animations without using any other Animation frameworks. It’s really very simple to create the Smoky Cup.

Come, Let’s dive

HTML Code
Consider a div with class:wrapper and next inside that consider a div with class:cup and now inside the child div consider the two span elements with different classes, one class:handle is to create the handle of the cup and one more class:smoke is to create the smoke effect.

CSS Code

1. First, style the parent div element by setting its position to absolute and set the top and left values to 50% and by using translate method we can position the div at the center of the browser.
```
.wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

Now let’s style the child div with class:cup by setting its width,height to 150px and set its position to relative so that we can easily control the child span elements.
```
.cup{
  width: 150px;
  height: 150px;
  background: #fdd47a;
  border-radius: 5px;
  position: relative;
}
```
Now style the span element with class:handle by setting its width to 20px and height to 50px and without setting its background color, I’ve set its border to 15px solid #fdd47a and made its border-left value to 0px so that we get the handle effect and set its z-index value to -1 so that its value will be always lesser than the other elements. and set its position to absolute so that we can place the handle at the correct position by using right,top properties.
```
.handle{
  position: absolute;
  width:20px;
  height: 50px;
  right: -35px;
  top: 55px;
  border: 15px solid #fdd47a;
  border-left: 0px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  z-index: -1;
}
```
I’m using the box-shadow effect to the cup and handle. set the box-shadow value to 1px 3px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 3px 1px rgba(0,0,0,.2), the first value is for outer shadow and the second value is for inner shadow.
```
.cup{
 box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.3),inset -2px -2px 3px 1px rgba(0,0,0,.2);
}
.handle{
 box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.3),inset -2px -2px 3px 1px rgba(0,0,0,.2);
}
```

I’m going to use the before and after pseudo-elements to create smoke, first set its width and height next set its background to transparent and give the shadow effect to it by setting its box-shadow value to 0px 25px 20px -9px #e5e5e5, and make its opacity to 0 and by setting its position to absolute we can place the smoke wherever we want.

.smoke:before{
  position: absolute;
  content: "";
  background: transparent;
  width: 145px;
  height: 30px;
  top: -35px;
   box-shadow: 0px 25px 20px -9px #e5e5e5;
  opacity: 0;
  animation: smoke 4s linear infinite;
  transition: 0.5s linear;
}

.smoke:after{
  position: absolute;
  content: "";
  background: transparent;
  width: 145px;
  height: 30px;
  top: -35px;
   box-shadow: 0px 25px 20px -9px #e5e5e5;
  opacity: 0;
  animation: smoke1 4s linear 2s infinite;
  transition: 0.5s linear;
}

CSS3 Keyframe Animations

here I’m using to two keyframe animations (smoke and smoke1 which I’ve included into the smoke:before and smoke:after pseudo-elements) and I’ve divided the animation into four parts by 0% 50% 70% 100%, in each part I’ve set some values according to that values smoke behaviour changes and I’ve set the animation to infinite so that the animation would never end and I’ve used the translateY method to move the smoke in vertical direction.

@keyframes smoke {
  0%{
   transform: translateY(0px);
  }
  50%{
    transform: translateY(-35px);
    opacity: 1;
  }
  70%{
    transform: translateY(-55px);
    opacity: 1;
    width: 75%;
    margin-left: 20px;
  }
  
  100%{
   transform: translateY(-115px);
    opacity: 0.2;
    width: 20%;
    margin-left: 40px;
  }
  
}

@keyframes smoke1 {
  0%{
   transform: translateY(0px);
  }
  50%{
    transform: translateY(-45px);
    opacity: 1;
  }
  70%{
    transform: translateY(-65px);
    opacity: 1;
    width: 50%;
    margin-left: 30px;
  }
  
  100%{
   transform: translateY(-145px);
    opacity: 0.2;
    width: 0%;
    margin-left: 60px;
  }
  
}

I hope you like this cool stuff and check out the demo

See the Pen Smoky Cup by rajeshdn (@cool_lazyboy) on CodePen.0