@keyframes myAnim {
    0%,
    100% {
      transform: translateX(0%);
      transform-origin: 50% 50%;
    }
  
    15% {
      transform: translateX(-30px) rotate(6deg);
    }
  
    30% {
      transform: translateX(15px) rotate(-6deg);
    }
  
    45% {
      transform: translateX(-15px) rotate(3.6deg);
    }
  
    60% {
      transform: translateX(9px) rotate(-2.4deg);
    }
  
    75% {
      transform: translateX(-6px) rotate(1.2deg);
    }
  }

  .animate__backInLeft{animation: myAnim 2s ease 0s 1 normal forwards;}
  .anim:hover{animation: myAnim 2s ease 0s 1 normal forwards;}

  .bgc2:hover {
    background: linear-gradient(to right top, #fffb1a, #fffb1a, #fffb1a, #fffb1a, #fffb1a, #ffdf2b, #ffc43d, #ffac4d, #ea826b, #b7697a, #7a5a70, #49474c);
    background-size: 400% 400%;
  
    -webkit-animation: AnimationName 15s ease infinite;
    -moz-animation: AnimationName 15s ease infinite;
    -o-animation: AnimationName 15s ease infinite;
    animation: AnimationName 15s ease infinite;
  }

  .bgc { background-image: linear-gradient(to right top, #fffb1a, #fffb1a, #fffb1a, #fffb1a, #fffb1a, #ffdf2b, #ffc43d, #ffac4d, #ea826b, #b7697a, #7a5a70, #49474c);}
  
@-webkit-keyframes AnimationName {
  0%{background-position:57% 0%}
  50%{background-position:44% 100%}
  100%{background-position:57% 0%}
}
@-moz-keyframes AnimationName {
  0%{background-position:57% 0%}
  50%{background-position:44% 100%}
  100%{background-position:57% 0%}
}
@-o-keyframes AnimationName {
  0%{background-position:57% 0%}
  50%{background-position:44% 100%}
  100%{background-position:57% 0%}
}
@keyframes AnimationName {
  0%{background-position:57% 0%}
  50%{background-position:44% 100%}
  100%{background-position:57% 0%}
}