Seamless CSS Animations - html

Question

I have a html program with a css and js file, and i have a continuously looping spin animation on one of my elements, when i hover over it it changes its animation to a different animation, but when i hover it, it instantly moves back to 0deg causing a uncomfortable jump, is there a way for the animation to know where it is currently to start at that position?
here's my code, its all of it so its a bit long
body{
background: #808080;
}
.Glow{
transform: rotate(90deg);
background:blue;
position: absolute;
border-radius: 50%;
overflow: hidden;
}
.Glow:nth-child(1){
width: 300px;
height: 300px;
background: #ffffff;
-webkit-clip-path: polygon(00% 100%, 50% 50%, 100% 100%);
}
.Glow:nth-child(2){
width: 300px;
height: 300px;
background: #ffffff;
-webkit-clip-path: polygon(0% 0%, 50% 50%, 100% 0%);
}
.Glow:nth-child(3){
width: 270px;
height: 270px;
margin: 15px;
background: #808080;
}
.Glow:nth-child(4){
width: 300px;
height: 300px;
-webkit-clip-path: polygon(30% 100%, 45% 85%, 50% 50%, 55% 85%, 70% 100%);
background: #ffffff;
}
.Glow:nth-child(5){
width: 300px;
height: 300px;
-webkit-clip-path: polygon(30% 0%, 45% 15%, 50% 50%, 55% 15%, 70% 0%);
background: #ffffff;
}
.Glow:nth-child(6){
left: 45%;
top: 19%;
border-radius: 0%;
width: 3px;
height: 100px;
background: linear-gradient(#808080, #cccccc);
animation: null;
transform: rotate(0deg);
}
.Glow:nth-child(7){
left: 46.6%;
top: 19%;
border-radius: 0%;
width: 3px;
height: 100px;
background: linear-gradient(#808080, #cccccc);
animation: null;
transform: rotate(0deg);
}
.Glow:nth-child(8){
width: 150px;
height: 150px;
margin: 75px;
-webkit-clip-path: polygon(0% 0%, 0% 30%, 8% 39%, 8% 61%, 0% 70%, 0% 100%, 100% 100%, 100% 70%, 92% 61%, 92% 39%, 100% 30%, 100% 0%);
background: #ffffff;
}
.Glow:nth-child(9){
width: 150px;
height: 150px;
margin: 75px;
-webkit-clip-path: polygon(6% 41%, 6% 60%, 0% 66%, 0% 34%);
background: #ffffff;
}
.Glow:nth-child(10){
width: 150px;
height: 150px;
margin: 75px;
-webkit-clip-path: polygon(94% 41%, 94% 60%, 100% 66%, 100% 34%);
background: #ffffff;
}
.Glower:hover{
left: 37%;
top: 20%;
animation: spin1 2s linear 0s infinite;
}
.Glower{
transform: rotate(0deg);
position: absolute;
left: 37%;
top: 20%;
width: 300px;
height: 300px;
animation: spin 4s linear 0s infinite forwards;
}
#-webkit-keyframes spin{
100%{
-webkit-transform: rotate(450deg);
}
}
#-webkit-keyframes spinside{
100%{
-webkit-transform: rotate(270deg);
}
}
#-webkit-keyframes openCircle1{
100%{
top: 40%;
}
}
#-webkit-keyframes openCircle2{
100%{
top: 10%;
}
}
#-webkit-keyframes spin1{
0%{
-webkit-transform: scale(1) rotate(0deg);
}
25%{
-webkit-transform: scale(.9) rotate(120deg);
}
75%{
-webkit-transform: scale(1.1) rotate(240deg);
}
100%{
-webkit-transform: scale(1) rotate(360deg);
}
}
Edit: i use the spin1 and the spin animation btw
Edit 2: here's the codepen upload https://codepen.io/Inertiality/pen/mEBkvN
Edit 3: am i able to use transitions? cause i dont see how those could work with the animations