CSS Radial Gradient Animated Eye

1html {
2  height: 100%;
3  background-color: #bf4040;
4  background-image: radial-gradient(ellipse at 50% 45%, transparent 100px, #bf4040 100px), radial-gradient(ellipse at 50% 55%, transparent 100px, #bf4040 100px), radial-gradient(circle, #222 20px, white 20px, white 40px, transparent 0), radial-gradient(#222 150px, transparent);
5  background-size: 500px 250px, 500px 250px, 100px 100px, 500px 250px;
6  background-position: 50% 50%, 50% 50%, 50% 50%, 50% 50%;
7  background-repeat: no-repeat;
8  animation: 5s distress infinite linear; }
9
10@keyframes distress {
11  0% {
12    background-position: 50% 50%, 50% 50%, calc(50% - 80px) 50%; }
13  10% {
14    background-position: 50% 50%, 50% 50%, calc(50% + 80px) 50%; }
15  20% {
16    background-position: 50% 50%, 50% 50%, 50% calc(50% - 50px); }
17  30% {
18    background-position: 50% 50%, 50% 50%, 50% calc(50% - 50px); }
19  40% {
20    background-position: 50% 50%, 50% 50%, calc(50% - 50px) calc(50% - 50px); }
21  50% {
22    background-position: 50% 50%, 50% 50%, calc(50% + 50px) calc(50% + 50px); }
23  60% {
24    background-position: 50% 50%, 50% 50%, calc(50% + 50px) calc(50% + 50px); }
25  70% {
26    background-position: 50% 50%, 50% 50%, calc(50% + 80px) 50%; }
27  80% {
28    background-position: 50% 50%, 50% 50%, calc(50% + 80px) calc(50% + 50px); }
29  90% {
30    background-position: 50% 50%, 50% 50%, calc(50% - 80px) 50%; }
31  100% {
32    background-position: 50% 50%, 50% 50%, calc(50% - 80px) 50%; } }
33