Stand Animation Upon Completion in css

Question

Once the animation is finished, it will not stop and return to its original state I want the width to stay at 46%

.option{
 background: #c8d7f5;
 margin-top: 3px;
 border-radius: 3px;
 padding: 5px;
 transition:width .5s;
}

#o1{
 animation: set 1s;
 width:2%;
}

@keyframes set{
 from{width:2%;}
 to{width:46%;}
}

<div class='option' id='o1'>TEXT</div>

Does this answer your question? [Stopping a CSS3 Animation on last frame](https://stackoverflow.com/questions/4359627/stopping-a-css3-animation-on-last-frame) — Aleksandr Belugin, Feb 04 '20 at 19:42
As the comment above points out, this question is a duplicate. Please search for similar questions before asking. Refer to the [How to Ask](https://stackoverflow.com/help/how-to-ask/) article for more information. — Stephen M Irving, Feb 04 '20 at 19:47

score 2 · Accepted Answer · answered Feb 04 '20 at 19:31

animation-fill-mode: forwards

or in this case, just use the shorthand of including "forwards" in your animation declaration

.option{
 background: #c8d7f5;
 margin-top: 3px;
 border-radius: 3px;
 padding: 5px;
 transition:width .5s;
}

#o1{
 animation: set 1s forwards;
 width:2%;
}

@keyframes set{
 from{width:2%;}
 to{width:46%}
}

<div class='option' id='o1'>TEXT</div>

Stand Animation Upon Completion in css

1 Answers1