Tengo una animación para desvanecer el encabezado en una página:

 h1{ animation: fadeIn linear 3s; -webkit-animation: fadeIn linear 3s; -moz-animation: fadeIn linear 3s; -o-animation: fadeIn linear 3s; -ms-animation: fadeIn linear 3s; } @keyframes fadeIn { 0% {opacity:0;} 33% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} 33% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} 33% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} 33% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} 33% {opacity:0;} 100% {opacity:1;} }

Ahora quiero usar exactamente la misma animación para desvanecerse en el texto debajo del encabezado una vez que finalice la primera animación. Eso significa que tengo que copiar y pegar todo el código por segunda vez, y lo único que estoy cambiando es el porcentaje de opacidad en el que comienza el desvanecimiento, así como la duración de la animación. ¿Hay alguna manera de usar la misma animación fadeIn pero declarar una variable? Aquí está mi pseudocódigo sobre lo que quiero hacer:

 var startingPercentage; /*Somehow implementing a JS variable into CSS*/ h1{ startingPercentage = 33; /*Define startingPercentage as equal to 33 for this first animation*/ animation: fadeIn linear 3s; -webkit-animation: fadeIn linear 3s; -moz-animation: fadeIn linear 3s; -o-animation: fadeIn linear 3s; -ms-animation: fadeIn linear 3s; } h2{ startingPercentage = 75; /*Redefine starting percentage as 75, so it starts fading in 3 seconds after the page loads*/ animation: fadeIn linear 4s; -webkit-animation: fadeIn linear 4s; -moz-animation: fadeIn linear 4s; -o-animation: fadeIn linear 4s; -ms-animation: fadeIn linear 4s; } @keyframes fadeIn { 0% {opacity:0;} startingPercentage% {opacity:0;} /*Use the abstracted variable instead of rewriting all this code repeatedly*/ 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} startingPercentage% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} startingPercentage% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} startingPercentage% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} startingPercentage% {opacity:0;} 100% {opacity:1;} }

¿Cómo haría esto en CSS? ¿Hay alguna manera de usar variables de JavaScript dentro de CSS?