Animation(Не понял)

Question

Почему в конце анимации пропадает квадрат?(тот,который анимирован)
https://code.sololearn.com/Wr24IOgs1078/?ref=app

Answer 1

This is because the width resets to 0 after the animation is over. I've added two lines to your div style, namely:

-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;

E.g.

div {
animation-name: colorchange;
animation-duration: 5s;
animation-delay: 2s;
animation-fill-mode:forwards;
height:100px;
width:0px;
background-color:red;
-webkit-animation-name: colorchange;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode:forwards;
}
@keyframes colorchange {
from { width: 0px; }
to { width: 100px; }
}
@-webkit-keyframes colorchange {
from { width: 0px; }
to { width: 100px; }
}