HTML
<div class="container">
<div class="character">
<div class="eye"></div>
<div class="eye"></div>
<div class="mouth"></div>
<div class="arm"></div>
<div class="arm"></div>
</div>
<div class="trajectory">
<div class="curtain"></div>
</div>
<div class="table">
<div class="legs"></div>
</div>
</div>
<form action="">
<button type="submit">Replay</button>
</form>
CSS
body {
background: #fff;
display: flex;
display: -webkit-flex;
display: -ms-flex;
height: 100vh;
flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
margin: 0;
}
.container {
background: inherit;
height: 100px;
min-width: 375px;
position: relative;
}
.container > div {
position: absolute;
}
.character {
border: 4px solid transparent;
border-right: 4px solid #000;
border-left: 4px solid #000;
border-radius: 15% / 60%;
width: 130px;
height: 50px;
}
.eye, .mouth, .arm {
position: absolute;
}
.eye {
border: 4px solid #000;
border-radius: 50%;
width: 10px;
height: 10px;
top: 15%;
left: 45%;
animation: eyes 2s linear;
}
.eye + .eye {
left: 80%;
}
.mouth {
border: 2px solid #000;
width: 12px;
height: 12px;
top: 48%;
left: 64%;
will-change: transform;
animation: mouth 2s cubic-bezier(0.17, 0.81, 0.29, 0.94);
}
.arm {
border: 4px solid transparent;
border-right: 4px solid #000;
border-radius: 50%;
width: 25px;
height: 35px;
top: -25%;
left: -10%;
transform-origin: 80% 80%;
transform: rotate(45deg);
will-change: transform;
animation: arms 2s cubic-bezier(0, 1, 0, 1);
}
.arm + .arm {
left: 90%;
}
.trajectory {
background: inherit;
border: 4px solid transparent;
border-top: 4px solid #000;
border-radius: 50%;
top: 40px;
left: 48%;
width: 60px;
height: 40px;
}
.curtain {
background: inherit;
transform-origin: 100% 100%;
width: 50px;
height: 50px;
transform: translate(-20px, -19px) rotate(135deg);
will-change: transform;
animation: showTrajectory 2s linear;
}
.table {
border-bottom: 4px solid #000;
width: 120px;
height: 16px;
top: 32px;
left: 57%;
transform-origin: -31% 50%;
transform: translateX(42px) rotate(0deg);
will-change: transform;
animation: table 2s linear;
}
.legs {
border-right: 4px solid #000;
border-left: 4px solid #000;
margin: auto;
width: 70%;
height: 16px;
}
button {
background: transparent;
border: 2px solid #666666;
color: #666666;
font-family: Helvetica, sans-serif;
font-size: 18px;
padding: 8px 12px;
-webkit-appearance: none;
animation: showReplay 2.5s;
}
button:hover {
border-color: #000;
color: #000;
}
button:active {
background: #000;
border-color: #000;
color: #fff;
}
button:focus {
outline: 0;
}
@keyframes eyes {
from {
background: #000;
border: 0;
transform: translate(4px, 4px) scale(1, 1);
}
30% {
background: #000;
border: 0;
transform: translate(4px, 4px) scale(1, 1);
}
34% {
background: #000;
border: 0;
transform: translate(4px, 4px) scale(1, 0);
}
38% {
background: #000;
border: 0;
transform: translate(4px, 4px) scale(1, 1);
}
70% {
background: #000;
border: 0;
transform: translate(4px, 4px) scale(1, 1);
}
74.9% {
background: #000;
border: 0;
transform: translate(4px, 4px) scale(1.5, 0);
}
75% {
background: transparent;
border: 4px solid #000;
transform: translate(0, 0);
}
to {
background: transparent;
border: 4px solid #000;
transform: translate(0, 0);
}
}
@keyframes mouth {
from {
border-bottom: 0;
height: 0;
transform: translateY(7px);
}
75% {
border-bottom: 0;
height: 0;
transform: translateY(7px);
}
to {
border-bottom: 2px solid #000;
height: 12px;
transform: translateY(0px);
}
}
@keyframes arms {
from {
transform: rotate(155deg);
}
75% {
transform: rotate(155deg);
}
to {
transform: rotate(45deg);
}
}
@keyframes showTrajectory {
from {
transform: translate(-20px, -19px) rotate(45deg);
}
75% {
transform: translate(-20px, -19px) rotate(45deg);
}
93% {
transform: translate(-20px, -19px) rotate(136deg);
}
to {
transform: translate(-20px, -19px) rotate(136deg);
}
}
@keyframes table {
from {
transform: translateX(36px) rotate(-180deg);
}
75% {
transform: translateX(36px) rotate(-180deg);
}
93% {
transform: translateX(36px) rotate(0deg);
}
to {
transform: translateX(42px) rotate(0deg);
}
}
@keyframes showReplay {
from {
visibility: hidden;
}
99% {
visibility: hidden;
}
to {
visibility: visible;
}
}
1 Response