How to stop shakey animation

I have an animation here

The problem is that it's quite shakey and not smooth as it should be.

Is there a way of making it seemless?

body {background-color: 
grey;} 
.sometext {color: #787878; 
font-size: 30px; text- 
shadow: -2px -3px 10px 
rgba(255, 255, 255, 0.75), 
2px 4px 12px rgba(0, 0, 0, 
0.25);
font-weight:bolder; text- 
align: center;} 

.sometext {animation: text. 
color 10s linear infinite; 
position:relative; 
animation. 
direction:alternate. 
reverse;} 

@keyframes text-color {0%. 
{text-shadow: -2px -3px 10px 
rgba(255, 255, 255, 0.75), 
2px 4px 12px rgba(0, 0, 0, 
0.25);} 50% {text-shadow: 
10px 10px 30px rgba(255, 
255, 255, 0.75), 30px 20px 
4px rgba(0, 0, 0, 0.25);} 
100%{text-shadow: 10px 10px 
30px rgba(255, 255, 255, 
0.75), 30px 20px 4px rgba(0, 
0, 0, 0.25);}}

.white {position:relative; 
background-color: white; 
box-shadow: 10px 30px 30px 
40px white; width: 20px;  
left:-1px;top:-110
px;opacity:0.1}

.white {animation: torch 10s 
ease-in-out infinite; 
animation-delay: 0s; 
position:relative;animation. 
direction: alternate. 
reverse;} 

@keyframes torch 
{from{background-color: 
grey;} to {background-color: 
white; box-shadow: 10px 30px 
30px 40px white; 
opacity:0.9;}} 




.sunray {
height: 200px;
width: 3px;
background-color: white;
opacity: 0.5;
filter: blur(5px);
position: relative;
left: 110px;
top: -120px;
}

.sunray {
animation: ray 15s linear 
infinite;
animation-direction: 
alternate-reverse; 
animation-delay: 0s;
}

@keyframes ray {
from {
transform: translate(-100px, 
-50px) rotate(-45deg);
}
to {
transform: rotate(-45deg); 
color: transparent; opacity: 
0.1;
}
}

.sunray1 {
height: 200px;
width: 3px;
background-color: white;
opacity: 0.5;
filter: blur(5px);
position: relative;
left: 0px;
top: -250px;

}

.sunray1 {

animation: ray1 10s linear 
infinite;

animation-direction: 
alternate-reverse; 
animation-delay: 0s;

}

@keyframes ray1 {

from {

height: 2px;

}

to {

height: 200px;

}

}
<div class="sometext">text 
text text text text text 
text text text. </div>
<div class="white"></div> 
<div class="sunray"></div> 
<div class="sunray1"></div>

All of my text animations are shakey, even on my front page in mobile. Is there some kind of rule here that I'm missing? Is box-shadow or text shadow an issue with animations or does transforming text from one size to another or one state to another usually cause it?