what's wrong with my code?

Question

div {
animation: magic 10s ease-in 1s infinte reverse;
-webkit-animation: magic 10s ease-in 1s infinte reverse;
width: 0px;
background-color: blue;
}
@keyframes magic {
from{ width: 0px;}
to { width: 200px; }
from{ background-color: blue;}
to { background-color: red;}
}
@-webkit-keyframes magic {
from{ width: 0px;}
to { width: 200px; }
from{ background-color: blue;}
to { background-color: red;}
}

Answer 1

1-)animation-name
2-) Just one time use from and to. Or you can use %0 %20%30 etc.

Answer 2

Thanks, I saw the mistake just earlier. Thanks anyway.