How to make announcement bar text blink on my website?

Topic summary

A user requested CSS code to create a blinking effect for their website’s announcement bar text.

Solution Provided:

  • Add custom CSS code to the base.css file in Shopify’s theme code editor
  • The code uses CSS @keyframes animation with opacity transitions to create the blinking effect
  • Animation settings: 1-second duration, linear timing, infinite loop

Outcome:

  • The solution was successfully implemented
  • Issue resolved
Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.

hello, can someone give me code to make my announcement bar text blink?

www.exoticsouls.world

password: bf22

Hello @ExoticSouls :waving_hand:

In Shopify Admin, you can go to Edit theme code, open file base.css and add this code snippet at the bottom

.announcement-bar__message {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

The announcement bar should then blink. Hope that helps!

worked, thank you

You are welcome :slightly_smiling_face: