skewX() effect added on element after the animation is finished

Question

I am trying to have an italic h1 with it's box italic. I have an animation on the h1.

HTML:

<h1>Title</h1>

CSS:

h1 {
    font-size: 4rem;
    background-color: var(--black);
    transform: skewX(-20deg);
    animation: slideBottom 2.5s;
}

@keyframes slideBottom {
    0% {
        transform: translateY(50%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

I want the text and it's title box to come italic when animation starts.

I also can't wrap this in a div because it will change other elements that are already stylized.