Learn how to create Coffee Machine Pure CSS Animation.

Author: Henrique Rodrigues

Made with: HTML / CSS

Read More: CSS Border Animation Using Clip

HTML

<div class="container"> <div class="coffee-header"> <div class="coffee-header__buttons coffee-header__button-one"></div> <div class="coffee-header__buttons coffee-header__button-two"></div> <div class="coffee-header__display"></div> <div class="coffee-header__details"></div> </div> <div class="coffee-medium"> <div class="coffe-medium__exit"></div> <div class="coffee-medium__arm"></div> <div class="coffee-medium__liquid"></div> <div class="coffee-medium__smoke coffee-medium__smoke-one"></div> <div class="coffee-medium__smoke coffee-medium__smoke-two"></div> <div class="coffee-medium__smoke coffee-medium__smoke-three"></div> <div class="coffee-medium__smoke coffee-medium__smoke-for"></div> <div class="coffee-medium__cup"></div> </div> <div class="coffee-footer"></div> </div>

CSS