html – Div vanishing throughout CSS computer animation

I made an easy computer animation (3 completely) however the 2nd time it plays the div simply outright vanishes and afterwards returns after a couple of secs.

<.
<< html lang=" en">
<> < head>>.
<< meta charset=" UTF-8">
<> < meta name=" viewport" web content=" size= device-width, initial-scale= 1.0">>.
<< title>> File<.
<< web link rel=" stylesheet" href=" index.css">
<> .
<< body>>.
<< div>>.
<< p>> Computer animation<.
<.
<.
<.

div {

size: 100px;
elevation: 100px;
extra padding: 5px;
animation-duration: 10s, fives, sevens;
animation-direction: alternate-reverse, alternating, alternating;

animation-delay: sixes, 0s, sixes;
animation-iteration-count: 7, 6, 6;
animation-name: move-away, color-change, big-to-small;
}

p {
shade: white;
text-align: facility;
user-select: none;
}

@keyframes move-away {
from {
margin-left: 100%;.
}



to {
margin-right: 20px;.
}
}

@keyframes color-change {
from {
background-color: #DCAB 6B;.
}

25% {
background-color: # 7d4f50;.
}

50% {
background-color: # 8f250c;.
}

75% {
background-color: # 583101;.
}

to {
background-color: # 000000;.
}
}

@keyframes big-to-small {
from {
extra padding: 5px;.
}

50% {
extra padding: 20px;.
}

to {
extra padding: 5px;.
}
}