Why does an element's width change after animation ends?

Question

I'm learning jQuery, testing its functionality, and have some problem with an example I made.

https://codepen.io/MaxVelichkin/pen/pBJeZy

 /*remove animate2 class and assign animate1 class to target*/ $(function() { $('#trigger').on('click', function() { $('#target').removeClass('animate2'); $('#target').addClass('animate1'); }); }); /*remove animate1 class and assign animate2 class to target*/ $(function() { $('#trigger2').on('click', function() { $('#target').removeClass('animate1'); $('#target').addClass('animate2'); }); });

 /*just a container around*/ #container { margin: 10px; width: 350px; height: 350px; border: solid green 1px; } /*green button*/ #trigger { width: 50px; height: 50px; border-radius: 100%; background-color: green; margin: 20px auto; } /*red button*/ #trigger2 { width: 50px; height: 50px; border-radius: 100%; background-color: red; margin: 20px auto; } /*Target div which will be changing*/ #target { width: 100px; height: 100px; border: solid blue 1px; margin: 10px auto; } /*Keyframes for green button*/ @keyframes myfirst { 0% { background: white; width: 100px; height: 100px; border-radius: 0%; } 100% { background: blue; width: 150px; border-radius: 100%; } } /*Keyframes for red button*/ @keyframes mysecond { 0% { background: blue; width: 150px; border-radius: 100%; } 100% { background: white; width: 100px; height: 100px; border-radius: 0%; } } /*cusstom class to be assigned by green button*/ .animate1 { -webkit-animation: myfirst 3s; animation: myfirst 3s; height: 100px; background: blue; width: 150px; border-radius: 100%; margin: 10px auto; } /*cusstom class to be assigned by red button*/ .animate2 { -webkit-animation: mysecond 3s; animation: mysecond 3s; height: 100px; width: 150px; border: solid red 1px; border-radius: 0%; margin: 10px auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container"> <div id="trigger"></div> <div id="trigger2"></div> <div id="target"></div> </div>

There are:

• 2 buttons, green and red.
• 2 sets of keyframes.
• 2 custom classes which start the animation of corresponding keyframes and applies the styles from the last keyframe.
• target div, which style I want to change on button click.

When I click on the button, it assigns a class to the target div and removes the class, assigned by another button.

Question 1: Why the width of the target div is changing back to 100px after the green button animation ends (why it doesn't remain 150px)?

Question 2: Do I do everything right or there is a better jQuery approach?

Answer 1

Your #target is taking precedence since it is a id selector. This has a width of 100px . Your class animate1 is getting overwritten, so that's why you aren't seeing 150px .

Answer 2

你可以像这样的动画编码：myfirst 3s forwords;