I'm trying to animate the background color and the heading color at the same time

Question

I'm trying to figure out how to animate the background color and the heading color at the same time without having the background-color animation affect every element inside the body of the document. This code bit is how far I've gotten. Thanks in advance to anyone who tries to help :)
https://code.sololearn.com/WaDp4gboiMyy/?ref=app

Answer 1

If you do not define the properties in the child nodes they will inherit them from their parent node. Explicitly declare the color and background-color properties in the child nodes.
https://code.sololearn.com/Wrc2Yk7KGA0g/?ref=app

Answer 2

Guilhermino Gomes , From what you describe and your code it seems you wouldn't want the text color of the div to change,but in your colorchange animation you have instruction of colors and didn't specified color to your div,so they apply to them as child of the body...
Also,be aware in CSS there are some priority , for exemple an id/# is more specific than a ./class which is more specific than a tag and you can add a !important (even if not recommended) to a specific style propriety to tell that it have to stay that way.
As I know I'm not that clear you could check that https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Hope it will answer your question a little.