<div class="steaming-coffee">
  <div class="cup"></div>
<div class="test">
<div class="steam">
  <div class="one"></div>
  <div class="two"></div>
  </div>
  <div class="steam-2">
  <div class="one"></div>
  <div class="two"></div>
  </div>
    <div class="steam-3">
  <div class="one"></div>
  <div class="two"></div>
  </div>
  </div>
</div>

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

.steaming-coffee {
  position: relative;
}

.cup {
  position: relative;
  width:200px;
  height: 150px;
  background-color: #e9d8a6;
  top:120px;
  left:-30px;
  border-radius: 0 0 20px 20px;
}

.cup:before {
  content:"";
  position: absolute;
  width:60px;
  height:60px;
  border: 20px solid #e9d8a6;
  border-radius:50%;
  left:-65px;
  top:25px;
}

.cup:after {
  content:"";
  position: absolute;
  background-color: #fff;
  height:15px;
  width:350px;
  border-radius:20px;
  top:160px;
  left:-80px;
}

.test {
  position: relative;
  width:200px;
  height: 100px;
  overflow: hidden;
  opacity:0.5;
  top:-150px;
}

@keyframes steam {
  0% {transform: translateY(100px);}
  100% {transform: translateY(7px);}
}

.steam {
  position: absolute;
  top:100px;
  animation: steam 1s linear infinite;
}

.steam-2 {
  position: absolute;
  top:100px;
  left:50px;
  animation: steam 1s linear infinite;
}

.steam-3 {
  position: absolute;
  top:100px;
  left:100px;
  animation: steam 1s linear infinite;
}

.one {
  position: absolute;
}

.two {
  position: absolute;
}

.steam:before, .one:before, .two:before, .steam-2:before, .steam-3:before {
  content:"";
  position: absolute;
  border-left: 7px solid white;
  border-top: 7px solid white;
  width:30px;
  height: 30px;
  border-top-left-radius:100%;
  transform: rotate(-40deg);
}

.one:before {
  top:-93px;
  left:0;
}

.two:before {
  top:-185px;
  left:1.2px;
}

.steam:after, .one:after, .two:after, .steam-2:after, .steam-3:after {
  content:"";
  position: absolute;
  border-right: 7px solid white;
  border-top: 7px solid white;
  width:30px;
  height: 30px;
  border-top-right-radius:100%;
  transform: rotate(40deg);
}

.steam:after {
  top:-46.5px;
  left:4px;
}

.one:after {
  top: -139.5px;
  left:4px;
}

.two:after {
  top:-231px;
  left:4.7px;
}

.steam-2:after {
  top:-46.5px;
  left:4.5px;
}

.steam-3:after {
  top:-46.5px;
  left:4.5px;
}