HomeCSSAnimationCSS Cup Animation | CSS Animation Tutorial

CSS Cup Animation | CSS Animation Tutorial

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will be creating a fun animation. To create this animation we need HTML, CSS and some ready to use SVG images.
 
This animation consists of a cup with animated coffee waves. It also comes with subtle bubbles animation.
 
These kinds of CSS animation projects are a great way to practice keyframes and other animation properties. You can check more of these tutorials in this playlist from my youtube channel. These tutorials will help you improve your CSS skills in the most fun way.
 

Video Tutorial:

If you would like to learn through a video tutorial rather than reading this blog post, you can check out this video here down below. For more such tutorials and resources, subscribe to my youtube channel.

Project Folder Structure:

Now let us begin by creating the project folder structure. We create a project folder called – “Cup Animation”. Inside this folder, we have four files. These files are index.html, style.css and 2 SVG files. The first two files are the HTML document and stylesheet respectively.

HTML:

Let us start with the HTML code. Firstly copy the code below and paste it into your CSS file.
The HTML code consists of div with class name – cup. Inside this div, we have three more divs with a common class name – bubble. These divs also a unique classname.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cup Animation</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="cup">
      <div class="bubble bubble-1"></div>
      <div class="bubble bubble-2"></div>
      <div class="bubble bubble-3"></div>
    </div>
  </body>
</html>

CSS:

We now style these elements and animation to them using CSS. We start by removing paddings and margins from all the elements.

Next, we set ‘#faf0ca’ as the background colour for the body. We use the cup, ‘cup: before’ and ‘cup: after’ elements to shape the divs into the cup.

In the next step, we add two images as the background of the cup and set the position for each of them to ‘0 0’. We also add an animation to the cup element.

We set the ‘background-position’ of both the elements to ‘-100% 0’ at 100% of the keyframes. This way our waves animation is ready.

Now to add animation to the bubbles, we use transform with ‘translateY(-150px)’ value. This makes the bubbles seem to be rising. Apart from this we also set random ‘animation-delay’ and ‘animation-duration’ values for each bubble.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #faf0ca;
}
.cup {
  height: 210px;
  width: 220px;
  border: 10px solid #030303;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 20px 20px 60px 60px;
  background: url("coffee-img-1.svg"), url("coffee-img-2.svg");
  background-position: 0 0, 0 0;
  background-repeat: repeat-x;
  animation: coffee 4s infinite linear;
}
@keyframes coffee {
  100% {
    background-position: -100% 0, -100% 0;
  }
}
.cup:before {
  content: "";
  position: absolute;
  height: 80px;
  width: 60px;
  border: 10px solid #030303;
  border-left: none;
  right: -75px;
  top: 30px;
  border-radius: 0 30px 80px 0;
}
.cup:after {
  position: absolute;
  content: "";
  height: 10px;
  width: 300px;
  background-color: #030303;
  left: -45px;
  bottom: -10px;
  border-radius: 10px;
}
.bubble {
  height: 15px;
  width: 15px;
  background-color: #fbbe08;
  border-radius: 50%;
  position: absolute;
  animation: bubbles forwards infinite;
  opacity: 0.6;
}
@keyframes bubbles {
  100% {
    transform: translateY(-150px);
    opacity: 0;
  }
}
.bubble-1 {
  left: 30px;
  bottom: 10px;
  animation-delay: 0.5s;
  animation-duration: 3s;
}
.bubble-2 {
  left: 80px;
  bottom: 35px;
  animation-delay: 1.2s;
  animation-duration: 4s;
}
.bubble-3 {
  left: 140px;
  bottom: 30px;
  animation-duration: 4s;
}

Our animation is now ready. If you have any issues while creating this project you can download the source code by clicking on the download button below. Also, don’t forget to drop your queries, suggestions and feedback in the comments below.
Happy Coding!

RELATED ARTICLES

Zombie CSS Art

Batman CSS Art

LEAVE A REPLY

Please enter your comment!
Please enter your name here

five × 5 =

Most Popular