CSS coffee animation

Hello Coder! Welcome to Codewithshobhit Blog. Today we are going to Create CSS coffee animation  

CSS coffee animation

Project Folder Structure:

  • Create a file called  index.html  to serve as the main file.

  • Create a file called  style.css  for the CSS code.
  • Create a file called  script.js  for the JavaScript code.

HTML CODE

HTML(PUG) 
.container 
  .shelf
    .bowls
    .bowls
    .bowls
    .bottle
    .food-ctn
  .shelf
    .salt
    .pepper
    .jar
      .jar-in
  .coffee-maker
    .coffee-maker-bottom
      .coffee-maker-bottom-in
      .bolt
    .coffee-maker-middle
    .coffee-maker-top
      .coffee-maker-top-in
      .beak
      .hat
      .hat-top
        .hat-top-in
      .handle
        .handle-part
        .handle-part
        .handle-part
        .handle-part
        .handle-part
  .hob
    - for (var i = 1; i <=3; i++)
      .hob-part
    .gas
      .flames-1
        - for (var i = 1; i <= 12; i++)
          .flame
      .flames-2
        - for (var i = 1; i <= 12; i++)
          .flame.flame-back
    .knob.knob-right
    .knob.knob-left
    .cup
      .cup-in
      .cup-handle
      .cup-saucer
      .coffee
      .splashes
        .splash
        .splash

Explanation Of HTML CODE

The structure consists of a container containing shelves, various elements like bowls, bottle, food container, coffee maker, hob, gas flames, knobs, cup, and splashes.

CSS CODE

CSS(SCSS) 
$background: #F7EBDB;
$medium: #97a5b2;
$light: lighten($medium, 15%);
$dark: darken($medium, 15%);
$red: Black;
$blue:#2C869B;
$coffee: #69463A;

body {
  background: $red;
  margin: 0;
  font-size: 2rem;
  display: flex;
  flex: 1;
  width:100vw;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}
.container {
  background-color: red;
background-image: linear-gradient(335deg, #F7EBDB 23px, transparent 23px),
linear-gradient(155deg, #F7EBDB 23px, transparent 23px),
linear-gradient(335deg, #F7EBDB 23px, transparent 23px),
linear-gradient(155deg, #F7EBDB 23px, transparent 23px);
background-size: 58px 58px;	
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
  width: 800px;
  height: 800px;
  position: absolute;
  border-radius: 15px;
    -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  z-index: 1;
  transform:scale(0.6);
  overflow: hidden;
}
.coffee-maker {
  width:350px;
  height:350px;
  position: absolute;
  bottom:212px;
  right:110px;
  transform-origin: 0% 70%;
  animation: rotate 10s ease;
  z-index: 100;
}
@keyframes rotate {
  0%, 100% {
    transform:rotate(0deg);
  }
  20%, 80% {
    transform:rotate(-45deg) translateY(-5px);
  }
}
.coffee-maker-bottom, .coffee-maker-top {
  position: absolute;
  bottom:0;
  left:0;
  right:0;
  margin:0 auto;
  width: 40%;
  height: 40%;
  perspective: 200px;
  z-index: 10;
}
.coffee-maker-top {
  bottom:38%;
}
.coffee-maker-bottom-in, .coffee-maker-top-in {
  background-image: linear-gradient(
      to right,
      $light 0%,
      $light 33.33%,
      $medium 33.33%,
      $medium 66.66%,
      $dark 66.66%,
      $dark 100%
    );
  height: 100%;
  width: 100%;
  bottom:15px;
  position: absolute;
  transform: rotateX(15deg); 
}
.coffee-maker-top-in {
  transform: rotateX(-15deg);
  position: absolute;
  // width:90%;
  height:80%;
  margin:0 auto;
  left:0;
  right:0;
  z-index: 2;
  
}
.coffee-maker-middle {
  background-color: $dark;
  bottom:38%;
  height:10%;
  width:30%;
  position: absolute;
  left:0;
  right:0;
  margin:0 auto;
  z-index: 1;
}
.beak {
  background-color: $light;
  top:10px;
  left:-30%;
  width: 40%;
  height: 15px;
  position: absolute;
  border-radius: 90px 90px 10px 10px;
  z-index: 1;
  &:after {
    content:'';
    position: absolute;
    background-color: $light;
    width:100%;
    height:60px;
    transform:skew(45deg);
    left:75%;
    top:100%;
  }
}
.hat {
  background-color: $medium;
  top:-22%;
  position: absolute;
  width:110%;
  height:30%;
  left:-5%;
  right:0;
  margin:0 auto;
clip-path: polygon(0% 100%, 40% 40%, 60% 40%, 100% 100%);
  z-index: 99;
  &:before {
    content:'';
    position: absolute;
    background-color: $dark;
    width:38%;
    height:100%;
    right:0;
    top:0;
    transform:skewX(20deg)
  }
    &:after {
    content:'';
    position: absolute;
    background-color: $light;
    width:38%;
    height:100%;
    left:0;
    top:0;
     transform:skewX(-20deg)
  }
}
.hat-top {
  position: absolute;
  width: 25%;
  height: 20%;
  top: -20%;
  left:37%;
  perspective:200px;
}
.hat-top-in {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: $dark;
  top: 0%;
  left:0%;
  transform:rotateX(-55deg);
    &:after {
      content:'';
      position: absolute;
      background-color: $dark;
      width:100%;
      height: 100%;
      border-radius: 50%;
      top:-50%;
      left:0;
      }
}
.handle {
  position: absolute;
  width: 100%;
  height: 100%;
  right: -100%;
  top:10%;
  z-index: 1;
}
.handle-part:nth-child(1) {
  position: absolute;
  left:0;
  top:0;
  background-color: $light;
  height: 30%;
  width: 18%;
  border-radius: 5px;  
  transform:skewX(-10deg);
  z-index: 2;
}
.handle-part:nth-child(2) {
  position: absolute;
  left:15%;
  top:0;
  background-color: $dark;
  height: 22%;
  width: 30%;
  border-radius: 5px;  
  transform:skewX(-10deg);
  z-index: 1;
}
.handle-part:nth-child(3) {
  position: absolute;
  left:2%;
  top:45%;
  background-color: $dark;
  height: 22%;
  width: 80%;
  border-radius: 25px;  
  transform:rotate(-80deg);
  z-index: 1;
}
.handle-part:nth-child(4) {
  position: absolute;
  left:27%;
  top:6%;
  background-color: $dark;
  height: 23%;
  width: 35%;
  border-radius: 20px;  
  transform:rotate(70deg);
  z-index: 1;
}
.handle-part:nth-child(5) {
  position: absolute;
  left:12%;
  bottom:2.5%;
  background-color: $dark;
  height: 15%;
  width: 35%;
  border-radius: 0px 0px 25px 25px;  
  z-index: 1;
}
.hob {
  background-color: $light;
  position: absolute;
  width:500px;
  height: 170px;
  bottom:0;
  left:150px;
  border-radius:10px 10px 0 0;
  z-index: 3;
  &:after {
    background-color: $dark;
    width:100%;
    height: 10px;
    content:'';
    position: absolute;
    left:0;
    top:90px;
  }
    &:before {
    background-color: $dark;
    width:60%;
    height: 50px;
    content:'';
    position: absolute;
    left:20%;
    top:120px;
  }
}
//burners
.hob-part:nth-child(1), .hob-part:nth-child(2){
  width:55px;
  height:40px;
  position: absolute;
  border: 15px solid #3F3F4E;
  border-bottom: 0;
  top: -55px;
}
.hob-part:nth-child(1) { 
  right:158px;
  border-top-left-radius: 40px;
  border-right:0;
}
.hob-part:nth-child(2) { 
  right:40px;
  border-top-right-radius: 40px;
  border-left:0;
}
.hob-part:nth-child(3) { 
  background-color: #3F3F4E;
  width:100px;
  height:15px;
  position: absolute;
  top: -15px;
  right:83px;
  border-radius: 5%;
  z-index: 2;
  &:after {
    background-color: lighten(#3F3F4E, 20%);
    position: absolute;
    content:'';
    width: 8px;
    height: 60%;
    top: 20%;
    right:9px;
    border-radius: 20%;
    box-shadow: -15px 0 lighten(#3F3F4E, 20%), -30px 0 lighten(#3F3F4E, 20%), -45px 0 lighten(#3F3F4E, 20%), -60px 0 lighten(#3F3F4E, 20%), -75px 0 lighten(#3F3F4E, 20%)
  }
}
.gas {
  width:20%;
  height:5%;
  position: absolute;
  top: -8%;
  right:83px;
  z-index: 1;
  transform:rotate(2deg)
}
.flames-1, .flames-2 {
  position: absolute;
  widows: 100%;
  height: 100%;
  animation: flames 1s infinite;
}
.flames-1 {
  z-index: 2;
}
.flames-2 {
  z-index: 1;
}
.flame{
  height:22px;
  width:10px;
  position: absolute;
  background-color: $blue ;
  bottom:0;
  transform-origin : center bottom;
  border-radius: 40px 0;
}
.flame-back {
  height:28px;
  width:12px;
  background-color: lighten($blue, 20%);
}
$angle : -40;
$left:4px;
@for $i from 1 through (12) {
  .flame:nth-child(#{$i}) {
    transform : rotate(#{$angle}deg);
    left:$left;
  }
  $angle : $angle + 3;
  $left : $left+ 8px;  
}
@keyframes flames {
  0% {
    transform: scale(1, 1)
    
  }
  50% {
    transform: scale(1.02, 1.15)
    
  }
  100% {
    transform: scale(1, 1)
  }
}
.knob {
  position: absolute;
  top:20px;
  right:65px;
  border-radius:50%;
  width: 50px;
  height: 50px;
  background-color: $medium;
  &:after {
    content:'';
    position: absolute;
    width:14px;
    height:100%;
    background-color: $dark;
    top:0;
    left:18px;
    transform:rotate(65deg);
  }
  &.knob-left {
    right:150px;
    &:after {
      transform:rotate(0deg);
    }
  }
}
.cup {
  background-color: $red;
  position: absolute;
  left:85px;
  top:-85px;
  width: 100px;
  height: 80px;
  border-radius: 0 0 50px 50px;
  z-index: 1;
}
.cup-in {
  width: 100%;
  height: 100%;
  border-radius: 0 0 50px 50px;
  z-index: 10;
  background-color: $red;
  position: absolute;
  top:0;
  left:0;
  &:after {
    content:'';
    position: absolute;
    width: 100%;
    height: 8px;
    background-color: #fff;
    top:10px;
  }
}
.cup-handle {
  position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    right: -20px;
    top: 20px;
    border: 10px solid $red;
}
.cup-saucer {
  position: absolute;
  bottom:0;
  width:120%;
  height:12px;
  left:-10%;
  background-color: $red;
  z-index: 3;
  border-radius:5px;
  &:after {
    content:'';
    position: absolute;
    width:70%;
    height: 6px;
    bottom:0;
    left:15%;
    background-color: darken($red, 10%);
    top:100%;
  border-radius:2px;
  }
}
.coffee {
  background-color: $coffee;
  width:16px;
  border-radius: 50px;
  position: absolute;
  top:-225px;
  left:44px;
  z-index: 1;
  animation: coffee 10s ease-out;
}
@keyframes coffee {
  0%, 20% {
    height:0px;
    transform:translateY(0px);
  }
  25%, 80% {
   height:240px;
    transform:translateY(0px);
  }
  81%, 100% {
    height:0px;
    transform:translateY(240px);
  }
}
.splash {
  position: absolute;
  left:50px;
  width: 8px;
  height: 8px;
  background-color: $coffee;
  border-radius: 50%;
  animation: splash-right 10s ease;
}
.splash:nth-child(2) {
  left:42px;
  animation: splash-left 10s 0.2s ease;
}
@keyframes splash-right {
  0%, 70%, 73%, 76%{
    transform: scale(1) translate(0, 0);
  }
  71%, 74%, 77% {
    transform: scale(1.1) translate(15px, -12px);
  }
  72%, 75%, 78%{
    transform: scale(0.8) translate(30px, 0px);
  }
}
@keyframes splash-left {
  0%, 70%, 73%, 76%{
    transform: scale(1) translate(0, 0);
  }
  71%, 74%, 77% {
    transform: scale(1.4) translate(-10px, -12px)
  }
  72%, 75%, 78%{
  transform: scale(1.2) translate(-20px, 0px);
  }
}
.shelf {
  position: absolute;
  width:250px;
  height:20px;
  border-radius: 10px;
  background-color: $light;
  top:250px;
  left: 100px;
  // opacity:0.5;
  z-index: 1;
}
.shelf:nth-child(2) {
  top:200px;
  right:100px;
  left:auto;
}
.bowls {
  background-color: darken($red, 10%);
  position: absolute;
  right:10px;
  bottom:20px;
  width: 90px;
  height: 50px;
  border-radius: 0 0 35px 35px;
    &:after {
    content:'';
    position: absolute;
    width: 100%;
    height: 6px;
    background-color: #fff;
    top:10px;
  }
}
.bowls:nth-child(1) {
  z-index: 3;
}
.bowls:nth-child(2) {
  background-color: $red;
  bottom:40px;
  transform: rotate(10deg);
  z-index: 2;
}
.bowls:nth-child(3) {
  bottom:60px;
  z-index: 1;
  right:5px;
  transform: rotate(-5deg);
}
.bottle {
  right:120px;
  position: absolute;
  bottom:20px;
  background-color: #2C869B;
  height:70px;
  width:40px;
  border-radius: 10px 10px 2px 2px;
  &:after {
    right:12px;
    top:-30px;
    position: absolute;
    content:'';
    bottom:20px;
    background-color: #2C869B;
    height:40px;
    width:16px;
    border-radius: 5px;
  }
  &:before {
    content:'';
    position: absolute;
    background-color: #ffffff;
    width: 20px;
    height: 25px;
    left:10px;
    bottom:20px;
  }
}
.food-ctn {
  left:15px;
  bottom:20px;
  position: absolute;
  background-color: lighten($blue, 10%);
  height:40px;
  width:50px;
  border-top: 5px solid #ffffff;
  &:after{
    content:'';
    top:-25px;
    position: absolute;
    background-color: $red;
    height:20px;
    width:50px;
    border-radius: 5px 5px 0 0;
  }
    &:before{
    content:'';
    top:-40px;
    position: absolute;
    background-color: lighten($blue, 10%);
    height:16px;
    width:16px;
    border-radius: 50%;
      left:18px
  }
}
.salt, .pepper {
  left:15px;
  bottom:20px;
  position: absolute;
  background-color: lighten($blue, 10%);
  height:35px;
  width:30px;
  &:after{
    content:'';
    top:-15px;
    position: absolute;
    background-color: $blue;
    height:15px;
    width:100%;
    border-radius: 50px 50px 0 0;
  }
}
.pepper {
  background-color: $red;
  left:50px;
  &:after {
    background-color: darken($red, 10%);
  }
}
.jar {
  position: absolute;
  bottom:20px;
  right: 40px;
  width: 100px;
  height: 50px;
  background-color: lighten($blue, 10%);
  border-radius: 0 0 45px 45px;
  &:after{
    content:'';
    top:-10px;
    left:-23px;
    position: absolute;
    background-color: $blue;
    height:12px;
    width:80%;
    border-radius: 50px;
    transform:rotate(45deg)
  }
  .jar-in {
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    background-color: lighten($blue, 10%);
    border-radius: 0 0 45px 45px;
    z-index: 10;
  
  }
}

Explanation Of CSS CODE

    • The SCSS code defines various variables for colors.
    • It includes styles for the body, container, coffee maker, coffee splashes, hob, gas flames, knobs, cup, and other elements.
    • The use of mixins and loops is seen, which helps generate repetitive styles efficiently.

  2. Animations:

    • The rotate animation is applied to the coffee maker, creating a rotation effect.
    • The flames animation makes the gas flames flicker.
    • The coffee animation simulates the pouring of coffee into a cup with splashes.

  3. Pseudo-elements and Pseudo-classes:

    • Pseudo-elements like :after and :before are used for decorative elements.
    • Classes like :nth-child are used to style specific instances of elements, such as flames and splashes.

  4. Gradient Background:

    • A gradient background is applied to the container, creating a textured appearance.

  5. Clip Path:

    • Clip path is applied to the container, giving it a circular shape.

  6. Transformations:

    • Various elements use the transform property for positioning and rotation.

  7. Positioning:

    • Absolute positioning is used for precise placement of elements.

Live Preview 

See the Pen CSS coffee animation by Codewithshobhit (@Codewithshobhit) on CodePen.

Conclusion

In conclusion, the provided Pug (HTML) and SCSS (CSS) code collectively represents a visually intricate and engaging coffee-themed animation. The HTML structure defines a detailed scene with elements such as shelves, coffee maker, hob, cup, and various decorative items. The SCSS styles utilize variables, animations, and pseudo-elements to create a cohesive and dynamic visual experience. The use of gradients, clip paths, and transformations enhances the overall aesthetics of the animation.

Key highlights include:

  1. Detailed Scene Structure: The HTML structure defines a scene with shelves, coffee-related items, and a visually appealing coffee maker setup.

  2. Color Palette: The color palette, defined through SCSS variables, includes shades of red, blue, and coffee brown, contributing to a warm and inviting ambiance.

  3. Animations: The animation effects, such as the rotation of the coffee maker, flickering gas flames, and the pouring of coffee with splashes, add dynamism and realism to the scene.

  4. Advanced Styling Techniques: The use of advanced styling techniques, including gradients, clip paths, and transformations, showcases a sophisticated approach to web design.

  5. Efficient Code Organization: The use of mixins, loops, and pseudo-classes demonstrates an efficient organization of code, making it easier to manage and extend.

Overall, the code reflects creativity in design and proficiency in using SCSS for styling and animations. It offers a captivating representation of a coffee-themed environment with attention to detail and aesthetics.

How to run this Html Css and Js Project in Our Browser?

first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.


Which Code Editor do you use to create those projects?

I am using VS Code Studio.


is this project responsive or not?

Yes! this project is a responsive project.

If you enjoyed reading this post and found it useful, please share it with your friends and follow me on Instagram.

Thanks for reading!

Author: Shobhit 😊