Можете вы анимировать заголовок <abbr> в CSS?

Question

Можете ли вы загладить название элемента <abbr> с помощью CSS?
Я знаю, как стилизовать название, и мне было интересно, можно ли его анимировать.
Я имею в виду, когда вы нависаете над элементом, он внезапно появляется. Я хочу, чтобы он медленно исчезал и интересовался, возможно ли это в CSS. JSFiddle

<abbr title="I want this to fade in">Hover over Me!</abbr> 

abbr { 
    position: relative; 
    border:none; 
} 
abbr:hover::after { 
    position: absolute; 
    height:auto; 
    width:475px; 
    bottom: -50px; 
    color:black !important; 
    left: 0; 
    display: block; 
    padding: 1em; 
    background: gold; 
    border-radius:2px; 
    content: attr(title); 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
} 

Answer 1

Вы должны использовать значение, где переход номера: opacity, например. DEMO

abbr:hover::after { 
    opacity:1; 
} 
abbr::after { 
    position: absolute; 
    opacity:0; 
    height:auto; 
    width:475px; 
    bottom: -50px; 
    color:black !important; 
    left: 0; 
    display: block; 
    padding: 1em; 
    background: gold; 
    border-radius:2px; 
    content: attr(title); 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:1s;/* DO NOT FORGET THE REGULAR ONE */ 
    } 

В демке псевдо уже существует, но translucide пока вы не парить <abbr>