Loader by fanishah
#212121
1.loader { 2 width: 8em; 3 height: 8em; 4} 5 6.loader__eye1, 7 .loader__eye2, 8 .loader__mouth1, 9 .loader__mouth2 { 10 animation: eye1 3s ease-in-out infinite; 11} 12 13.loader__eye1, 14 .loader__eye2 { 15 transform-origin: 64px 64px; 16} 17 18.loader__eye2 { 19 animation-name: eye2; 20} 21 22.loader__mouth1 { 23 animation-name: mouth1; 24} 25 26.loader__mouth2 { 27 animation-name: mouth2; 28 visibility: hidden; 29} 30 31@media (prefers-color-scheme: dark) { 32 :root { 33 --bg: hsl(var(--hue), 90%, 10%); 34 --fg: hsl(var(--hue), 90%, 90%); 35 } 36} 37 38@keyframes eye1 { 39 from { 40 transform: rotate(-260deg) translate(0, -56px); 41 } 42 43 50%, 44 60% { 45 animation-timing-function: cubic-bezier(0.17, 0, 0.58, 1); 46 transform: rotate(-40deg) translate(0, -56px) scale(1); 47 } 48 49 to { 50 transform: rotate(225deg) translate(0, -56px) scale(0.35); 51 } 52} 53 54@keyframes eye2 { 55 from { 56 transform: rotate(-260deg) translate(0, -56px); 57 } 58 59 50% { 60 transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1); 61 } 62 63 52.5% { 64 transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1, 0); 65 } 66 67 55%, 68 70% { 69 animation-timing-function: cubic-bezier(0, 0, 0.28, 1); 70 transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1); 71 } 72 73 to { 74 transform: rotate(150deg) translate(0, -56px) scale(0.4); 75 } 76} 77 78@keyframes eyeBlink { 79 from, 80 25%, 81 75%, 82 to { 83 transform: scaleY(1); 84 } 85 86 50% { 87 transform: scaleY(0); 88 } 89} 90 91@keyframes mouth1 { 92 from { 93 animation-timing-function: ease-in; 94 stroke-dasharray: 0 351.86; 95 stroke-dashoffset: 0; 96 } 97 98 25% { 99 animation-timing-function: ease-out; 100 stroke-dasharray: 175.93 351.86; 101 stroke-dashoffset: 0; 102 } 103 104 50% { 105 animation-timing-function: steps(1, start); 106 stroke-dasharray: 175.93 351.86; 107 stroke-dashoffset: -175.93; 108 visibility: visible; 109 } 110 111 75%, 112 to { 113 visibility: hidden; 114 } 115} 116 117@keyframes mouth2 { 118 from { 119 animation-timing-function: steps(1, end); 120 visibility: hidden; 121 } 122 123 50% { 124 animation-timing-function: ease-in-out; 125 visibility: visible; 126 stroke-dashoffset: 0; 127 } 128 129 to { 130 stroke-dashoffset: -351.86; 131 } 132} 133 134
2.1K views
2.1K views
MIT License