Why won't the animation: forwards work on :hover? The animation itself is functioning properly, but the command "forwards" isn't.
The Issue:
Here's the HTML code snippet:
<img src="images/notebook_desk.svg" class="notebook-cover">
Here's the CSS code snippet:
.notebook-cover{
max-width: 100%;
width: 100%;
height: auto;
display: block;
grid-column: 4;
margin-left: -40px;
transform-style: preserve-3d;
transform-origin: 0 50%;
transform: perspective(2000px);
z-index: 2;
}
.notebook-cover:hover{
animation: CoverBook 2s forwards
}
@keyframes CoverBook{
to{
transform: rotateY(180deg);
z-index: 4;
}
}