Administrator 1 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 post
0 bangank36 753 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% } } pramirol and Administrator 2 Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement, Enable Pinch/Zoom on lightbox, Geolocation Automatic Currency Converter, Sortable Table from GSheetIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to post
0 Administrator 1 Author Share Posted November 9, 2020 All fixed thank you sir!! bangank36 1 Link to post
Question
Administrator 1
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 post
Top Posters For This Question
2
1
Popular Days
Nov 9
3
Top Posters For This Question
Administrator 2 posts
bangank36 1 post
Popular Days
Nov 9 2020
3 posts
Popular Posts
bangank36
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,
Administrator
All fixed thank you sir!!
Posted Images
2 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment