Rixo Posted January 25, 2021 Share Posted January 25, 2021 Hi and thanks in advance! I've created a CSS gradient animation for the backgrounds on the top sections of each page of my site. I've tried using a comma between data-section-ids but it targets the full page, so the workaround so far is to target each data-section-id separately like the CSS below. My question is how to target multiple data-section-id's using one snippet of CSS rather than targeting each? section[data-section-id="5f099f4ce9cddf559f943775"] .section-background { background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d); background-size: 800% 800%; -webkit-animation: AnimationName 38s ease infinite; -moz-animation: AnimationName 38s ease infinite; animation: AnimationName 38s ease infinite; } section[data-section-id="5f094579b197041778919326"] .section-background { background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d); background-size: 800% 800%; -webkit-animation: AnimationName 38s ease infinite; -moz-animation: AnimationName 38s ease infinite; animation: AnimationName 38s ease infinite; } section[data-section-id="5f0ee56b5d535d77f9057b71"] .section-background { background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d); background-size: 800% 800%; -webkit-animation: AnimationName 38s ease infinite; -moz-animation: AnimationName 38s ease infinite; animation: AnimationName 38s ease infinite; } @-webkit-keyframes AnimationName { 0%{background-position:30% 0%} 50%{background-position:71% 100%} 100%{background-position:30% 0%} } @-moz-keyframes AnimationName { 0%{background-position:30% 0%} 50%{background-position:71% 100%} 100%{background-position:30% 0%} } @keyframes AnimationName { 0%{background-position:30% 0%} 50%{background-position:71% 100%} 100%{background-position:30% 0%} } Thank you! Beyondspace 1 Link to comment
Beyondspace Posted January 26, 2021 Share Posted January 26, 2021 3 hours ago, Rixo said: Hi and thanks in advance! I've created a CSS gradient animation for the backgrounds on the top sections of each page of my site. I've tried using a comma between data-section-ids but it targets the full page, so the workaround so far is to target each data-section-id separately like the CSS below. My question is how to target multiple data-section-id's using one snippet of CSS rather than targeting each? section[data-section-id="5f099f4ce9cddf559f943775"] .section-background { background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d); background-size: 800% 800%; -webkit-animation: AnimationName 38s ease infinite; -moz-animation: AnimationName 38s ease infinite; animation: AnimationName 38s ease infinite; } section[data-section-id="5f094579b197041778919326"] .section-background { background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d); background-size: 800% 800%; -webkit-animation: AnimationName 38s ease infinite; -moz-animation: AnimationName 38s ease infinite; animation: AnimationName 38s ease infinite; } section[data-section-id="5f0ee56b5d535d77f9057b71"] .section-background { background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d); background-size: 800% 800%; -webkit-animation: AnimationName 38s ease infinite; -moz-animation: AnimationName 38s ease infinite; animation: AnimationName 38s ease infinite; } @-webkit-keyframes AnimationName { 0%{background-position:30% 0%} 50%{background-position:71% 100%} 100%{background-position:30% 0%} } @-moz-keyframes AnimationName { 0%{background-position:30% 0%} 50%{background-position:71% 100%} 100%{background-position:30% 0%} } @keyframes AnimationName { 0%{background-position:30% 0%} 50%{background-position:71% 100%} 100%{background-position:30% 0%} } Thank you! You add them like so section[data-section-id="5f099f4ce9cddf559f943775" .section-background, section[data-section-id="5f099f4ce9cddf559f943775-2" .section-background{ background: linear-gradient(162deg, #05494a, #70b98d, #05494a, #0a5c5d); background-size: 800% 800%; -webkit-animation: AnimationName 38s ease infinite; -moz-animation: AnimationName 38s ease infinite; animation: AnimationName 38s ease infinite; } tuanphan 1 Greeting, it's 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, Delivery Date Picker, Lightbox Studio pluginIf 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 comment
Jeremyn Posted September 2, 2021 Share Posted September 2, 2021 (edited) This worked for me. Quote //moving gradiant section section[data-section-id="60425e65bb04cf77585223be"] .section-background, section[data-section-id="60482f6ec0532258368c3ab9"] .section-background{ background: radial-gradient(circle, #26887c, #134943, #26887c); background-size: 400% 400%; -webkit-animation: Animation 41s ease infinite; -moz-animation: Animation 41s ease infinite; -o-animation: Animation 41s ease infinite; animation: Animation 41s ease infinite; } @-webkit-keyframes Animation { 0%{background-position:22% 0%} 50%{background-position:79% 100%} 100%{background-position:22% 0%} } @-moz-keyframes Animation { 0%{background-position:22% 0%} 50%{background-position:79% 100%} 100%{background-position:22% 0%} } @-o-keyframes Animation { 0%{background-position:22% 0%} 50%{background-position:79% 100%} 100%{background-position:22% 0%} } @keyframes Animation { 0%{background-position:22% 0%} 50%{background-position:79% 100%} 100%{background-position:22% 0%} } Edited September 2, 2021 by Jeremyn tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment