HomeCSSAnimationTea Cup Animation CSS

Tea Cup Animation CSS

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a cute tea cup animation. To create this animation, we need just HTML and CSS. I haven’t used libraries, icons and images to create this animation.
This is an intermediate-level CSS animation project. With step by step process, we will create this quick animation. The reason I would recommend you to code along such tutorials is to experiment and explore new CSS properties.
In this project, we see a tea bag dipped in a teacup. This wakes up the teacup. If you are looking for more such projects to improve your CSS skills you should check out this playlist here. This playlist consists of a bunch of tutorials to help you enhance your CSS skills.

Video Tutorial:

If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out the video down below. also subscribe to my youtube channel where I post new tutorials every alternate day.

Project Folder Structure:

Before we start coding, let us take a look at the project folder structure. We create a project folder called – ‘Tea Cup Animation’.Inside this folder, we have two files – index.html and style.css. The first file is the HTML document and the second file is the stylesheet.

HTML:

We begin with the HTML code. The HTML code creates elements necessary to build the structure and layout of our document. First, copy the code provided to you below and paste it into your HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tea Cup Animation</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="teabag">
        <div class="string"></div>
      </div>
      <div class="teacup">
        <div class="eye eye-l"></div>
        <div class="eye eye-r"></div>
        <div class="mouth"></div>
        <div class="saucer"></div>
      </div>
    </div>
  </body>
</html>

CSS:

Next, we style these elements to shape them into desired parts to create the illustration. We also use CSS to animate these shapes.Now copy the code provided to you below and paste it into your stylesheet.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #f1bb34;
}
.container {
  height: 100vh;
  width: 31.25em;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
}
.teacup {
  position: absolute;
  background-color: #ede7de;
  height: 20em;
  width: 21.87em;
  border-radius: 1.25em 1.25em 9.37em 9.37em;
  bottom: 6.25em;
  left: 2.5em;
}
.teacup:before {
  position: absolute;
  content: "";
  height: 6.25em;
  width: 6.25em;
  border: 1.56em solid #ede7de;
  right: -6.25em;
  bottom: 7.5em;
  border-radius: 50%;
}
.eye {
  position: absolute;
  content: "";
  height: 1.87em;
  width: 3.75em;
  background-color: transparent;
  border: 0.62em solid #272048;
  border-radius: 3.75em 3.75em 0 0;
  border-bottom: none;
  top: 5em;
  animation: open-eye 8s infinite;
}

@keyframes open-eye {
  30% {
    height: 1.87em;
    width: 3.75em;
    background-color: transparent;
    border: 0.62em solid #272048;
    border-radius: 3.75em 3.75em 0 0;
    border-bottom: none;
  }
  35% {
    height: 1.87em;
    width: 1.87em;
    background-color: #272048;
    border: none;
    border-radius: 50%;
  }
  100% {
    height: 1.87em;
    width: 1.87em;
    background-color: #272048;
    border: none;
    border-radius: 50%;
  }
}
.eye-l {
  left: 4.37em;
}
.eye-r {
  right: 4.37em;
}
.mouth {
  position: absolute;
  background-color: #f26464;
  height: 4.68em;
  width: 9.37em;
  border-radius: 1.25em 1.25em 9.37em 9.37em;
  bottom: 5em;
  left: 6.25em;
  overflow: hidden;
}
.mouth:before {
  content: "";
  position: absolute;
  height: 9.37em;
  width: 9.37em;
  background-color: #c24c4c;
  border-radius: 50%;
  top: 1.87em;
}
.saucer {
  height: 2.5em;
  width: 25em;
  background-color: #ede7de;
  position: absolute;
  bottom: -0.62em;
  left: -1.25em;
  border-radius: 2.5em;
}
.saucer:before {
  position: absolute;
  content: "";
  height: 1.87em;
  width: 21.87em;
  top: 2.5em;
  background: linear-gradient(#dbd4cc 30%, #f0ede6 30%);
  left: 1.25em;
  border-radius: 2.5em;
}
.teabag {
  position: absolute;
  background-color: #ffc684;
  height: 5.62em;
  width: 5.62em;
  top: -15em;
  left: 10.31em;
  animation: dip 8s infinite;
}
@keyframes dip {
  30% {
    background-color: #ffc684;
    transform: translateY(46.5em);
  }
  60% {
    background-color: #462f29;
    transform: translateY(21.87em);
  }
  100% {
    background-color: #462f29;
    transform: translateY(0);
  }
}
.teabag:before {
  position: absolute;
  content: "";
  height: 10em;
  width: 7.5em;
  background-color: rgba(230, 237, 239, 0.3);
  clip-path: polygon(0% 100%, 0% 25%, 25% 0%, 75% 0%, 100% 25%, 100% 100%);
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.5) 0.18em,
    transparent 0.18em
  );
  background-size: 1.25em 1.25em;
  left: -0.93em;
  bottom: -1.25em;
}
.teabag:after {
  position: absolute;
  content: "";
  height: 0.62em;
  width: 3.75em;
  background-color: #f1bb34;
  border-radius: 0.62em;
  left: 0.93em;
  bottom: 7.18em;
}
.string {
  position: absolute;
  height: 30.25em;
  width: 0.31em;
  background-color: #272048;
  left: 2.81em;
  top: -31.87em;
}

That’s it for this tutorial. If you face any issues while creating this code you can download the source code y clicking on the download button below. Also if you have any queries, suggestions or feedback you can comment on them below.
Happy Coding!

Previous articleMCQ – 8/11/22
Next articleMCQ – 10/11/22
RELATED ARTICLES

Zombie CSS Art

Batman CSS Art

LEAVE A REPLY

Please enter your comment!
Please enter your name here

nineteen − five =

Most Popular