Animated Cup | Notion

HTML Page

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="cup.css">
</head>

<body>
    <div id="container">
        <div class="steam" id="steam1"></div>
        <div class="steam" id="steam2"></div>
        <div class="steam" id="steam3"></div>
        <div class="steam" id="steam4"></div>
        <div id="cup">
            <div id="cup-body">
                <div id="cup-shade"></div>
            </div>
            <div id="cup-handle"></div>
        </div>
        <div id="saucer"></div>
        <div id="shadow"></div>
    </div>
</body>

</html>

CSS Page

body{
    background-color: #45839f;
}
#container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.steam{
    position: absolute;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background-color: rgb(255,255,255);
    margin-top: -75px;
    margin-left: 75px;
    z-index:0;
    opacity: 0;
}
#steam1{
    -webkit-animation: steam1 4s ease-out 1s infinite;
    animation: steam1 4s ease-out 1s infinite;
}
@-webkit-keyframes steam1{
    0%{
        transform: translateY(0) translateX(0) scale(0.25);
        opacity: 0.2;
    }
    100%{
        transform: translateY(-200px) translateX(-20px) scale(1);
        opacity: 0;
    }
}
@keyframes steam1{
    0%{
        transform: translateY(0) translateX(0) scale(0.25);
        opacity: 0.2;
    }
    100%{
        transform: translateY(-200px) translateX(-20px) scale(1);
        opacity: 0;
    }
}
#steam2{
    -webkit-animation: steam2 4s ease-out 0.5s infinite;
    animation: steam2 4s ease-out 0.5s infinite;
}
#steam4{
    -webkit-animation: steam2 4s ease-out 1.5s infinite;
    animation: steam2 4s ease-out 1.5s infinite;
}
@-webkit-keyframes steam2{
    0%{
        transform: translateY(0) translateX(0) scale(0.25);
        opacity: 0.2;
    }
    100%{
        transform: translateY(-200px) translateX(20px) scale(1);
        opacity: 0.2; 
    }
}
@keyframes steam2{
    0%{
        transform: translateY(0) translateX(0) scale(0.25);
        opacity: 0.2;
    }
    100%{
        transform: translateY(-200px) translateX(20px) scale(1);
        opacity: 0.2; 
    }
} 
#cup{
    z-index: 1;
}
#cup-body{
    position: absolute;
    height: 200px;
    width: 300px;
    border-radius: 0 0 150px 150px;
    background-color: #fff;
    margin: auto;
    display: inline-block;
    overflow: hidden;
    z-index: 1;
}
#cup-shade{
    position: relative;
    height: 300px;
    width: 200px;
    background-color: #F3F3F3;
    display: inline-block;
    margin-left: 42%;
    margin-top: -3px;
    transform: rotate(50deg);
    z-index: 1;
}
#cup-handle{
    position: relative;
    height: 75px;
    width: 80px;
    border-radius: 0 150px 150px 0;
    border: 15px solid #F3F3F3;
    margin-bottom: 95px;
    margin-left: 250px;
    display: inline-block;
    z-index: 0;
}
#saucer{
    height: 10px;
    width: 300px;
    border-radius: 50%;
    margin-top: -5px;
    margin-left: 6px;
    background-color: #7bb8d4;
}
#shadow{
height: 10px;
width: 300px;
border-radius: 50%;
margin-top: -5px;
margin-left: 6px;
background-color: #7bb8d4;
}