1.container {
2  width: 250px;
3  height: 250px;
4  padding: 15px;
5  display: flex;
6  align-items: center;
7  justify-content: center;
8}
9
10.cloud {
11  width: 250px;
12}
13
14.front {
15  padding-top: 45px;
16  margin-left: 25px;
17  display: inline;
18  position: absolute;
19  z-index: 11;
20  animation: clouds 8s infinite;
21  animation-timing-function: ease-in-out;
22}
23
24.back {
25  margin-top: -30px;
26  margin-left: 150px;
27  z-index: 12;
28  animation: clouds 12s infinite;
29  animation-timing-function: ease-in-out;
30}
31
32.right-front {
33  width: 45px;
34  height: 45px;
35  border-radius: 50% 50% 50% 0%;
36  background-color: #4c9beb;
37  display: inline-block;
38  margin-left: -25px;
39  z-index: 5;
40}
41
42.left-front {
43  width: 65px;
44  height: 65px;
45  border-radius: 50% 50% 0% 50%;
46  background-color: #4c9beb;
47  display: inline-block;
48  z-index: 5;
49}
50
51.right-back {
52  width: 50px;
53  height: 50px;
54  border-radius: 50% 50% 50% 0%;
55  background-color: #4c9beb;
56  display: inline-block;
57  margin-left: -20px;
58  z-index: 5;
59}
60
61.left-back {
62  width: 30px;
63  height: 30px;
64  border-radius: 50% 50% 0% 50%;
65  background-color: #4c9beb;
66  display: inline-block;
67  z-index: 5;
68}
69
70.sun {
71  width: 120px;
72  height: 120px;
73  background: -webkit-linear-gradient(to right, #fcbb04, #fffc00);
74  background: linear-gradient(to right, #fcbb04, #fffc00);
75  border-radius: 60px;
76  display: inline;
77  position: absolute;
78}
79
80.sunshine {
81  animation: sunshines 2s infinite;
82}
83
84@keyframes sunshines {
85  0% {
86    transform: scale(1);
87    opacity: 0.6;
88  }
89
90  100% {
91    transform: scale(1.4);
92    opacity: 0;
93  }
94}
95
96@keyframes clouds {
97  0% {
98    transform: translateX(15px);
99  }
100
101  50% {
102    transform: translateX(0px);
103  }
104
105  100% {
106    transform: translateX(15px);
107  }
108}
109