animacion de gota css

1#sun {
2margin-left: -10px;
3margin-top: 6px;
4opacity: 0;
5width: 60px;
6height: 60px;
7position: absolute;
8left: 45px;
9top: 15px;
10z-index: 1;
11 
12animation-name: rotate;
13animation-duration: 16000ms;
14animation-iteration-count: infinite;
15animation-timing-function: linear;
16}
17 
18#sun path {
19stroke-width: 0.18;
20fill: #9ea1a4;
21}
22@<a href="https://www.cssblog.es/tags/keyframes/">keyframes</a> rotate {
230% {
24transform: rotateZ(0deg);
25}
26 
27100% {
28transform: rotateZ(360deg);
29}
30}
31