Rixo

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!