When applying some CSS to this ponent:

<div id="cart-circle">
      <div id="cart-content">
          <div id="cart-icon" class="text-bordered fa fa-shopping-cart"></div>
          <div id="cart-title" class="text-bordered animated bounceOutRight"></div>
      </div>
 </div>

The problem es out after removing the class open-cart-circle from the div (with cart-circle class), which is added when the user clicks the circle itself. open-cart-circle tweaks the height, width and border-bottom-left-radius properties, performed by the animation:

@keyframes trigger-cart-circle {
  100% {
    height: 95px;
    width: 495px;
    border-bottom-left-radius: 26%; }
}

and this is how open-cart-circle looks like:

.open-cart-circle {
  animation-delay: 0s;
  animation-duration: 0.8s;
  animation-name: trigger-cart-circle;
  animation-fill-mode: both; 
}

So when open-cart-circle is added the animation begins and I want you to notice animation-fill-mode is intentionally put there in the code since I want the "circle" move smoothly (transitions with 0.5s) while opening and closing the side bar. Because after closing the side bar twice, the CSS transitions seem not to work. Why? I've just got stuck hours...

Here cart-circle must have transition:all because this "circle" should "softly" return to its original shape when closing:

#cart-circle {
  position: fixed;
  z-index: 999;
  box-shadow: 0 8px 11px rgba(0, 0, 0, 0.247);
  top: 0;
  right: 0;
  text-align: right;
  border-bottom-left-radius: 100%;
  border: 0.051px solid #333;
  background-color: #f1c40f;
  cursor: pointer;
  transition: all 0.5s;   /*HERE*/
}

EDIT

Do will-change property have any point here for a possible solution?

When applying some CSS to this ponent:

<div id="cart-circle">
      <div id="cart-content">
          <div id="cart-icon" class="text-bordered fa fa-shopping-cart"></div>
          <div id="cart-title" class="text-bordered animated bounceOutRight"></div>
      </div>
 </div>

The problem es out after removing the class open-cart-circle from the div (with cart-circle class), which is added when the user clicks the circle itself. open-cart-circle tweaks the height, width and border-bottom-left-radius properties, performed by the animation:

@keyframes trigger-cart-circle {
  100% {
    height: 95px;
    width: 495px;
    border-bottom-left-radius: 26%; }
}

and this is how open-cart-circle looks like:

.open-cart-circle {
  animation-delay: 0s;
  animation-duration: 0.8s;
  animation-name: trigger-cart-circle;
  animation-fill-mode: both; 
}

So when open-cart-circle is added the animation begins and I want you to notice animation-fill-mode is intentionally put there in the code since I want the "circle" move smoothly (transitions with 0.5s) while opening and closing the side bar. Because after closing the side bar twice, the CSS transitions seem not to work. Why? I've just got stuck hours...

Here cart-circle must have transition:all because this "circle" should "softly" return to its original shape when closing:

#cart-circle {
  position: fixed;
  z-index: 999;
  box-shadow: 0 8px 11px rgba(0, 0, 0, 0.247);
  top: 0;
  right: 0;
  text-align: right;
  border-bottom-left-radius: 100%;
  border: 0.051px solid #333;
  background-color: #f1c40f;
  cursor: pointer;
  transition: all 0.5s;   /*HERE*/
}

EDIT

Do will-change property have any point here for a possible solution?

• javascript
• jquery
• html
• css

• 2 Fixed the js errors and removed $(body) at the end: jsfiddle/ymvcuq9v – user5734311 Commented Jan 19, 2017 at 2:56
• Oh yes, that is the way how my original side bar actually works. I;m going to update the fiddle – 1w3j Commented Jan 19, 2017 at 3:07
• Would it be considered as a bug? I couldn't find any solution outside – 1w3j Commented Jan 19, 2017 at 16:50
• 1 will-change is for performance optimization only. It does not affect functionality. – user24950814234 Commented Jan 23, 2017 at 18:49
• I can't find the problem but there is a good example jsfiddle/bmh5g/12 – fingerpich Commented Feb 8, 2017 at 7:39

1 Answer 1

As you can see, the transition doesn't apply on the animation.

So the solution is simple, rename your trigger-* animations to trigger-open-* and create the corresponding trigger-close-* animations.

Then every time you add the open-* class, remove the close-* class. and every time you remove the open-* class, add the close-* class.

Here is your jsfiddle fixed. https://jsfiddle/pu5y8quz/