The code in this state.
https://jsfiddle.net/6x2vsLbq/
Both backgrounds fill the entire area.
.containera,
.containerb {
animation: fadeBody 5s ease 0s forwards;
}
.containerb {
display: flex;
flex: 1 0 0%;
}
@keyframes fadeBody {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
As soon as these are added to it:
https://jsfiddle.net/nf4wg7ma/
The purple background is able to be visible.
How would this be fixed so that the purple body background can never be able to be seen when one of the covers is clicked on.
document.querySelector('html').classList.add('bodyfadea');
document.querySelector('html').classList.add('bodyfadeb');
.containera,
.containerb {
animation: fadeBody 5s ease 0s forwards;
}
.containerb{
display: flex;
flex: 1 0 0%;
}
.bodyfadea,
.bodyfadeb {
background: #353198;
}
.bodyfadea body,
.bodyfadeb body{
animation: fadeBody 5s ease forwards;
}
@keyframes fadeBody {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}