Transform text to italico on hover!

Has no way, first because the only pseudo-element that exists for lines is ::first-line and it will only take the first lines, according to font-style other than font-weight does not support numeric values so that a transition is made between the non-italic and the Italic .

But not all is lost

You can simulate the italics using transform and if you consider paragraphs by <p> it will be possible, a functional example:

Note: to avoid the jump effect( The such bug), just add: transform: skewX(0.001deg);

.container p {
    transform: skewX(0.001deg); /*evita o "efeito de pulo"*/
    transition: transform .3s ease-in-out;
}

.container p:hover {
    transform: skewX(-20deg);
}

<div class="container">
     <p>foo bar baz</p>

     <p>Hello World!</p>

     <p>Olá Mundo!</p>
</div>

Of course this is not italic, if you have styles in paragraphs such as borders or background they may be affected as well, to avoid this you can add <span> for each paragraph without style and do so for example:

.container p {
    background: #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 5px;
}

.container p span {
    display: inline-block;
    transform: skewX(0.001deg); /*evita o "efeito de pulo"*/
    transition: transform .3s ease-in-out;
}

.container p:hover span {
    transform: skewX(-20deg);
}

<div class="container">
     <p>
         <span>foo bar baz</span>
     </p>

     <p>
         <span>Hello World!</span>
     </p>

     <p>
         <span>Olá Mundo!</span>
     </p>
</div>

Trying to remove blurry during animation

Unfortunately the title says "trying" because it is not something 100% guaranteed, it depends a lot on the hardware and software it uses, the problem of the "blurry" effect in texts is very common in Chrome, the techniques (attempts) that exist are:

Use -webkit-font-smoothing: subpixel-antialiased;:

Should look like this:

.container p {
    transition: transform .3s ease-in-out;
    -webkit-font-smoothing: subpixel-antialiased;
}

And in the second example:

.container p span {
    display: inline-block;
    transition: transform .3s ease-in-out;
    -webkit-font-smoothing: subpixel-antialiased;
}

However on computers with generic video driver it will probably not work as expected, or it may not work not at all.

Use transform: translateZ(0) ...

This is a hack , it for some reason in Chrome helps in rendering acceleration, but from what I read in some cases it works and in others it does not, it probably depends on the user's equipment:

.container p:hover span {
    transform: translateZ(0) skewX(-20deg);
}

And in the second example:

.container p:hover span {
    transform: translateZ(0) skewX(-20deg);
}

Can try both, yet yes as I mentioned before, will probably depend on the equipment (hardware and software).

Note: @ keyframes not solves the problem of the effect blurry , what occurred in hugo's answer is that he used the larger font, if he initially used transform: skewX(0.001deg);, before the transition and put 2em the Font will look almost identical to keyframes

#comtransform {
    font-size: 2rem;
    font-weight: bold;
    color: blue;
    transform: skewX(0.001deg); /*evita o "efeito de pulo"*/
    transition: transform .3s ease-in-out;
}

#comtransform:hover {
    transform: skewX(-20deg);
}

<p id="comtransform">@keyframes</p>