How can I animate a prepaid button on my Retailer Fashion Infinity theme?

Store Design
,

Topic summary

Issue: Seeks to animate a “prepaid” button in the Retailer Fashion Infinity theme (v3.0.5) but the CSS animation isn’t taking effect.

Context:

  • Provided product URLs for reference: two product pages on click2kart.in.
  • Shared CSS attempting to apply animation: animation: shopifyshake 4s; animation-iteration-count: infinite; and defined @keyframes shopifyshake with small translate/rotate transforms.
  • Also included classes for text animations (.text, .fadeInDown.text) with duration settings.

Current problem:

  • Despite the CSS and keyframes, the button does not animate. No error messages or console logs were provided.
  • Only the URL can be shared; no additional code context (HTML structure or full CSS) was supplied.

Status:

  • No confirmed solution or responses yet.
  • Discussion remains open; key unanswered point is why the animation isn’t applying to the intended button element.
Summarized with AI on January 16. AI used: gpt-5.
1

Hi,

I am using Retailer Fashion Infinity version 3.0.5 theme https://click2kart.in/collections/furniture-moving-tool/products/multi-purpose-kitchen-bubble-cleaner here.

I want to animate the prepaid button using below code but didn’t get result,

.button button–rad button–one-line add-cart-btn button–single-cart button–style1 add-cart-btn–state por button–single-cart-main {
animation: shopifyshake 4s;
animation-iteration-count: infinite;}
.text {display: block;font-size: 2em;width: 100%;-webkit-animation-duration: 2s;animation-duration: 1s;}
.fadeInDown.text {-webkit-animation-duration: 2s;animation-duration: 1s;}

@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); }
}

Any one can help .

Regards,

Naveen

2

I can only share the url .. https://click2kart.in/collections/furniture-moving-tool/products/double-sided-nano-gel-tape