1.eye {
2  width: 20px;
3  height: 8px;
4  background-color: rgba(240,220,220,1);
5  border-radius: 0px 0px 20px 20px;
6  position: relative;
7  left: 10px;
8  top: 40px;
9  box-shadow: 40px 0px 0px 0px rgba(240,220,220,1);
10}
11
12.head {
13  backface-visibility: hidden;
14  position: relative;
15  margin: -250px auto;
16  width: 80px;
17  height: 80px;
18  background-color: #111;
19  border-radius: 50px;
20  box-shadow: inset -4px 2px 0px 0px rgba(240,220,220,1);
21  animation: headAnim 1.5s infinite alternate;
22  animation-timing-function: ease-out;
23}
24
25.body {
26  position: relative;
27  margin: 90px auto;
28  width: 140px;
29  height: 120px;
30  background-color: #111;
31  border-radius: 50px/25px;
32  box-shadow: inset -5px 2px 0px 0px rgba(240,220,220,1);
33  animation: bodyAnim 1.5s infinite alternate;
34  animation-timing-function: ease-out;
35}
36
37@keyframes headAnim {
38  0% {
39    top: 0px;
40  }
41
42  50% {
43    top: 10px;
44  }
45
46  100% {
47    top: 0px;
48  }
49}
50
51@keyframes bodyAnim {
52  0% {
53    top: -5px;
54  }
55
56  50% {
57    top: 10px;
58  }
59
60  100% {
61    top: -5px;
62  }
63}
64
65.circ {
66  backface-visibility: hidden;
67  margin: 60px auto;
68  width: 180px;
69  height: 180px;
70  border-radius: 0px 0px 50px 50px;
71  position: relative;
72  z-index: -1;
73  left: 0%;
74  top: 20%;
75  overflow: hidden;
76}
77
78.hands {
79  margin-top: 140px;
80  width: 120px;
81  height: 120px;
82  position: absolute;
83  background-color: #111;
84  border-radius: 20px;
85  box-shadow: -1px -4px 0px 0px rgba(240,220,220,1);
86  transform: rotate(45deg);
87  top: 75%;
88  left: 16%;
89  z-index: 1;
90  animation: bodyAnim 1.5s infinite alternate;
91  animation-timing-function: ease-out;
92}
93
94.load {
95  position: absolute;
96  width: 7ch;
97  height: 32px;
98  text-align: left;
99  line-height: 32px;
100  margin: -10px auto;
101  font-family: 'Julius Sans One', sans-serif;
102  font-size: 28px;
103  font-weight: 400;
104  color: rgb(155, 152, 152);
105  left: 2%;
106  top: 5%;
107  animation: fontAnim 3.75s infinite;
108  animation-timing-function: ease-out;
109  word-wrap: break-word;
110  display: block;
111  overflow: hidden;
112}
113
114@keyframes fontAnim {
115  0% {
116    width: 7ch;
117  }
118
119  16% {
120    width: 8ch;
121  }
122
123  32% {
124    width: 9ch;
125  }
126
127  48% {
128    width: 10ch;
129  }
130
131  64% {
132    width: 11ch;
133  }
134
135  80% {
136    width: 12ch;
137  }
138
139  100% {
140    width: 13ch;
141  }
142}