I have an animation for fading the header in on a page:

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;}
}

Now I want to use the exact same animation to fade in the text below the header once the first animation is finished. That means I have to copy-paste this entire code a second time, and the only thing I am changing is the percent opacity in which the fading starts, as well as the duration of the animation. Is there a way to just use the same fadeIn animation but declare a variable? Here is my pseudocode on what I want to do:

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;}
}

How would I do this in CSS? Is there a way to use JavaScript variables within CSS?