Color Animated Announcement Bar

---

Description

Add an animated gradient color to the announcement bar. This plugin uses css editor and works with Squarespace 7.1.

---

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Color Animated Announcement Bar //

[data-header-theme] .sqs-announcement-bar-dropzone .sqs-announcement-bar {
  background: linear-gradient(99deg,#0d7d88,#708090,#add8e6);
  background-size: 400% 400%;
  -webkit-animation: AnimationName 6s ease infinite;
  -moz-animation: AnimationName 6s ease infinite;
  animation: AnimationName 6s ease infinite;
}

// Animation Keyframes - Do Not Edit or Delete //

@-webkit-keyframes AnimationName { 0% { background-position: 0% 51% } 50% { background-position: 100% 50% } 100% { background-position: 0% 51% } }

@-moz-keyframes AnimationName { 0% { background-position: 0% 51% } 50% { background-position: 100% 50% } 100% { background-position: 0% 51% } }

@keyframes AnimationName { 0% { background-position: 0% 51% } 50% { background-position: 100% 50% } 100% { background-position: 0% 51% } }

@-webkit-keyframes AnimationName { 0% { background-position: 0% 49% } 50% { background-position: 100% 52% } 100% { background-position: 0% 49% } }

@-moz-keyframes AnimationName { 0% { background-position: 0% 49% } 50% { background-position: 100% 52% } 100% { background-position: 0% 49% } }

@keyframes AnimationName { 0% { background-position: 0% 49% } 50% { background-position: 100% 52% } 100% { background-position: 0% 49% } }

---

Customize

Adjust the background color values to your liking. Changes to the announcement bar text style can be made in designs settings.

Do not delete or edit the animation keyframes.

---