Transform text to text on Hover!

Question

Good, I have a paragraph and I want him to have it font-style: italic; when I pass the mouse over, which properties should I :hover?! I wish it was a 0.3-second transition

Answer 1

There is no way, first because the only pseudo-element that exists for lines is the ::first-line and he will only catch the first lines, according to the font-style other than font-weight does not support numerical values to make a transition between the italicized and the italic.

But all is not lost

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

Note: to avoid the bounce effect (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 edges or background they may be affected as well, to avoid this you can add <span> for each unstyled paragraph 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 you use, the problem of the effect "blurry" in the texts is very common in Chrome, the techniques (attempts) that exist are:

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

Should stay 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 probably won’t work as expected, or maybe it doesn’t work at all.

Use transform: translateZ(0) ...

That’s 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 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);
}

You can try both, still as I mentioned before, probably will depend on the equipment (hardware and software).

---

Note: @keyframes does not solve the effect problem blurry, what occurred in the Hugo response is that it used the larger source, if used initially transform: skewX(0.001deg);, before the transition and place 2em the source will be almost identical to the 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>

Answer 2

I ran a test using @keyframes in place of transition And the result was even interesting, greatly diminished that little buggy at the time of the text.

I made a simple example, see the result.

p#anima {
    font-size: 2em;
    font-weight: bold;
    color: red;
    transition: all 300ms;
}
p#anima:hover {
    transform: skewX(-10deg);
}

p#key{
    font-size: 1.2rem;
    font-weight: bold;
    color: blue;
}
p#key-small{
    font-size: 0.6rem;
    font-weight: bold;
    color: blue;
}
p#key-big{
    font-size: 3rem;
    font-weight: bold;
    color: blue;
}
p#key:hover, p#key-small, p#key-big {
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 500ms; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
p#key:not(:hover), p#key-small:not(:hover), p#key-big:not(:hover) {
    -webkit-animation-name: rever; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 500ms; /* Safari 4.0 - 8.0 */
    animation-name: rever;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from   {transform: skewX(-3deg);}
    to {transform: skewX(-10deg);}
}
/* Standard syntax */
@keyframes example {
    from   {transform: skewX(-3deg);}
    to {transform: skewX(-10deg);}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes rever {
    from   {transform: skewX(-8deg);}
    to {transform: skewX(-0deg);}
}
/* Standard syntax */
@keyframes rever {
    from   {transform: skewX(-8deg);}
    to {transform: skewX(-0deg);}
}

<p id="anima">transition transform</p>

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

<p id="key-small">@keyframes-small</p>

 <p id="key-big">@keyframes-big</p>