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!