Add To Cart Button Animation Effect

Shopify Discussion
1

Hello, with the following code I can apply a “Shake” effect to the add to cart button on my website, but I want to use a different effect. The effect I want is available on this website (after staying on the product page for 4-5 seconds, look at the “Add to Cart” button: https://funnyfuzzy.co.uk/products/summer-leather-cooling-dog-cat-sofa-bed.

The code I use for the Shake effect is as follows.

.btn--secondary{
animation: shopifyshake 4s;
animation-iteration-count: infinite;}
.text {display: block;font-size: 2em;width: 100%;-webkit-animation-duration: 1s;animation-duration: 0.5s;}
.fadeInDown.text {-webkit-animation-duration: 1.6s;animation-duration: 0.8s;}

@keyframes shopifyshake {
0% { transform: translate(1px, 1px) rotate(0deg); }
1% { transform: translate(-1px, -2px) rotate(-1deg); }
2% { transform: translate(-3px, 0px) rotate(1deg); }
3% { transform: translate(3px, 2px) rotate(0deg); }
4% { transform: translate(1px, -1px) rotate(1deg); }
5% { transform: translate(-1px, 2px) rotate(-1deg); }
6% { transform: translate(-3px, 1px) rotate(0deg); }
7% { transform: translate(0px, 0px) rotate(0deg); }
8% { transform: translate(0px, 0px) rotate(0deg); }
80% { transform: translate(0px, 0px) rotate(0deg); }
90% { transform: translate(0px, 0px) rotate(0deg); }
100% { transform: translate(0px, 0px) rotate(0deg); }
2

please like if it works for you, let me know if you need any other input

@keyframes shopifyshake {
  0% { 
    transform: scaleX(1) scaleY(1);
  }
  2% { 
    transform: scaleX(1.02) scaleY(0.9);
  }
  4% { 
    transform: scaleX(0.98) scaleY(1.1);
  }
  6% { 
    transform: scaleX(1.03) scaleY(0.85);
  }
  8% { 
    transform: scaleX(0.97) scaleY(1.15);
  }
  10% { 
    transform: scaleX(1) scaleY(1);
  }
  12% { 
    transform: scaleX(1.02) scaleY(0.9);
  }
  14% { 
    transform: scaleX(0.98) scaleY(1.05);
  }
  16% { 
    transform: scaleX(1.01) scaleY(0.95);
  }
  18%{
    transform: scaleX(0.99) scaleY(1.05);
  }
  20% { 
    transform: scaleX(1) scaleY(1);
  }
  100% { 
    transform: scaleX(1) scaleY(1);
  }
}