How to make an animated teacup using CSS and HTML

I already know you’re wondering how to do this. At the end of this article, you can make a animated teacup using only CSS and HTML.

CSS allows animation of HTML elements without using JavaScript or Flash!

What are CSS Animations?

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times as you want.

To use CSS animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

1st step

Open vs code.

2nd step

Create a new folder.

3rd step

Create index.html file. Please refer to the code.

4th step

Create style.css file. please refer to the code.

5th step

You can open the index.html file using a live server.

Hope you found this useful. Do reach out to me if you have any trouble implementing this or if you need any help.