How to freeze a transition once it has reached the end ?

Question

I'm still kinda new to CSS so I don't know if it's possible but hopefully it is, I would like to know how to freeze a transition once it has reached the end. Here's a example. Try to make my first 2 boxes freeze at the end of the transition

https://code.sololearn.com/W8pD22B3B5S8/?ref=app

Answer 1

Instead, add mouseover listener on the targets to reset the width.

https://code.sololearn.com/Wt9r2U5KlU2J/?ref=app

Answer 2

It shrinks because you are using pseudo class of hover.
Don't use hover.

Answer 3

forwards

Answer 4

I think you misunderstood my question so here's a example. Try to make my first 2 boxes freeze at the end of the transition

https://code.sololearn.com/W8pD22B3B5S8/?ref=app

Answer 5

Thank you Gordon.