* {
margin : 0;
padding : 0;
box-sizing: border-box;
}
body {
background-color: darkgray;
padding : 100px 0 0 100px;
}
.head {
width : 100px;
height : 110px;
animation: moveX 7s forwards;
}
.cricle {
width : 100px;
height : 100px;
border : 4px solid #fff;
border-radius: 50%;
transform : translate(0, 0) rotate(0, 0);
animation : rotate 5s ease forwards;
}
.hat {
transform : translate(-12px, -10px) rotate(-10deg);
width : 100px;
height : 20px;
background-color : blueviolet;
border-top-left-radius : 70%;
border-top-right-radius: 70%;
}
.ball {
transform : translate(20px, -35px);
width : 20px;
height : 20px;
background-color: red;
border-radius : 50%;
}
.main {
position : absolute;
left : 130px;
transform-style: preserve-3d;
animation : moveX 7s forwards;
}
.body {
width : 40px;
height : 150px;
background-color: #fff;
}
.neck {
width : 10px;
height : 20px;
background-color: #fff;
transform : translateX(15px) translateY(-8px);
}
.left-hand,
.right-hand {
position : absolute;
left : 8px;
width : 15px;
height : 100px;
background-color: red;
border-radius : 10px;
transform-origin: top;
}
.left-hand {
z-index : -1;
animation: left-hand-move 5s forwards;
}
.right-hand {
animation: right-hand-move 5s forwards;
}
.left-leg,
.right-leg {
position : absolute;
top : 120px;
left : 10px;
width : 20px;
height : 200px;
background-color: saddlebrown;
border-radius : 10px;
transform-origin: top;
}
.left-leg::after,
.right-leg::after {
position : absolute;
top : 175px;
left : -1px;
content : "";
/* display : block; */
width : 50px;
height : 25px;
background-color : skyblue;
border-radius : 50px 50px 0 0;
}
.left-leg {
z-index : -1;
animation: right-hand-move 5s forwards;
transform: translateZ(3);
}
.right-leg {
animation: left-hand-move 5s forwards;
transform: translateZ(5);
}
@keyframes moveX {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
@keyframes rotate {
0% {
transform: rotate(-30deg);
}
25% {
transform: rotate(30deg);
}
50% {
transform: rotate(-30deg);
}
75% {
transform: rotate(0deg);
}
}
@keyframes left-hand-move {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(25deg);
}
50% {
transform: rotate(-25deg);
}
75% {
transform: rotate(25deg);
}
100% {
transform: rotate(-25deg);
}
}
@keyframes right-hand-move {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-25deg);
}
50% {
transform: rotate(25deg);
}
75% {
transform: rotate(-25deg);
}
100% {
transform: rotate(25deg);
}
}
