How to restart animation from the last animation state?

[iamacatperson]

I have some triangle SVG shapes that change color when I click a button. Currently, there are three color combo states: default, color 1, and color 2. Then two buttons button 1 (for color 1) and button 2 (for color 2).

 

However, whenever I click button 1 (this is for color 1) right after clicking button 2, the triangles always revert to the default colors first before morphing into the new colors. 

 

What I'd like to happen is for it to morph from button 2 / color 2 state (if ever I'm coming from this state). The animation transition is more consistent and smoother this way.

 

Not sure what's the issue.

 

I have attached a codepen to demo the issue.

 

Thanks. 

See the Pen OMgPeJ by aguerrero (@aguerrero) on CodePen

[OSUblake]

Create a new animation, especially if you are going to have more than 2 states.

See the Pen obwjBx?editors=001 by osublake (@osublake) on CodePen