экспериментирую с CSS анимацией, столкнулся с проблемой анимации text-shdow, ниже по ссылке на codepen можно увидеть пример моего кода. Проблема заключается в том, что в обычных условиях (без анимации) text-shadow отображается верно, в моем случае нужно вытащить тень влево и вправо одновременно. При выполнении анимации тень должна увеличиваться так же влево и вправо. Но она уходит лишь влево! Что я не так делаю?
@keyframes rampage {
0%{transform:scale(3) rotate(0deg)}
3%{transform:scale(2.9) rotate(-1deg)}
6%{transform:scale(2.8) rotate(1deg)}
9%{transform:scale(2.7) rotate(-1deg)}
12%{transform:scale(2.6) rotate(1deg)}
15%{transform:scale(2.5) rotate(-1deg)}
18%{transform:scale(2.4) rotate(1deg)}
21%{transform:scale(2.3) rotate(-1deg)}
24%{transform:scale(2.2) rotate(1deg)}
27%{transform:scale(2.1) rotate(-1deg)}
30%{transform:scale(2) rotate(1deg)}
33%{transform:scale(1.9) rotate(-1deg)}
36%{transform:scale(1.8) rotate(1deg)}
39%{transform:scale(1.7) rotate(-1deg)}
42%{transform:scale(1.6) rotate(1deg)}
45%{transform:scale(1.5) rotate(-1deg)}
48%{transform:scale(1.4) rotate(1deg)}
51%{transform:scale(1.3) rotate(-1deg)}
54%{transform:scale(1.2) rotate(1deg)}
57%{transform:scale(1.1) rotate(-1deg)}
60%{color:white;transform:scale(1) rotate(0);
text-shadow:
-5px 0 1px rgba(255,255,255,1),
5px 0 1px rgba(255,255,255,1)}
64%{text-shadow:
-5px 0 4px rgba(255,255,255,1),
5px 0 4px rgba(255,255,255,1)},
-10px 0 4px rgba(255,255,255,1),
10px 0 4px rgba(255,255,255,1)}
68%{text-shadow:
-5px 0 7px rgba(255,255,255,1),
5px 0 7px rgba(255,255,255,1)},
-10px 0 7px rgba(255,255,255,1),
10px 0 7px rgba(255,255,255,1)},
-15px 0 7px rgba(255,255,255,1),
15px 0 7px rgba(255,255,255,1)}
70%{text-shadow:
-5px 0 10px rgba(255,255,255,1),
5px 0 10px rgba(255,255,255,1)},
-10px 0 10px rgba(255,255,255,1),
10px 0 10px rgba(255,255,255,1)},
-15px 0 10px rgba(255,255,255,1),
15px 0 10px rgba(255,255,255,1)},
-20px 0 10px rgba(255,255,255,1),
20px 0 10px rgba(255,255,255,1)}
99%{color:white}
100%{color:red;text-shadow:
-5px 0 10px rgba(255,255,255,0),
5px 0 10px rgba(255,255,a255,0)},
-10px 0 10px rgba(255,255,255,0),
10px 0 10px rgba(255,255,255,0)},
-15px 0 10px rgba(255,255,255,0),
15px 0 10px rgba(255,255,255,0)},
-20px 0 10px rgba(255,255,255,0),
20px 0 10px rgba(255,255,255,0)}
}