CSS Animation-name Property

Question

Please tell me one thing in this example why the width exceeds 100px after animation.

div {
animation-name: colorchange;
animation-duration: 5s;
}
@keyframes colorchange {
from { width: 0px; }
to { width: 100px; }
}

I think the maximum width should be 100px

Answer 1

no, animation happens only once and then element gets is original width back.

Answer 2

put max-width : 100px; in css

Answer 3

i think animation should cover maximum width upto 100px.
But in this example it's taking more than 100px

My question is... why is it happening