CSS only fade in/out

HTML

<p>Hover on me! Lorem ipsum <span>dolor</span> sit amet</p>

CSS

span {
    display: inline-block;
    overflow: hidden;
    max-width: 0;
    margin-right: -0.25em;
    opacity: 0;
    -webkit-transition-property: max-width, margin-right, opacity;
    -webkit-transition-duration: 0, 0, 0.5s;
    -webkit-transition-delay: 0.5s, 0.5s, 0;
}
p:hover span {
    max-width: 9999px;
    margin-right: 0;
    opacity: 1;
    -webkit-transition-delay: 0, 0, 0.5s;
}