Administrator Posted November 9, 2020 Share Posted November 9, 2020 Site URL: https://buffalo-bison-lsrk.squarespace.com/config/pages Hi my announcement bar animation has stopped working. Was working perfectly then stopped. Can anyone help?Here is the code: /*ANIMATED GRADIENT ANNOUNCEMENT BAR*/ .sqs-announcement-bar { background: linear-gradient(99deg, rgb(13,125,136), slategray, lightblue); background-size: 400% 400%; -webkit-animation: AnimationName 6s ease infinite; -moz-animation: AnimationName 6s ease infinite; animation: AnimationName 6s ease infinite; @-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%} } Link to comment
Beyondspace Posted November 9, 2020 Share Posted November 9, 2020 There is a selector that override the color, you can update the custom css like so [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 } @-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% } } BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Administrator Posted November 9, 2020 Author Share Posted November 9, 2020 All fixed thank you sir!! Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.