Эффект не работает ни в одном браузере

Question

На моем сайте есть значки на «доке», и когда пользователь наводится над одним, краткое описание «падает» из значка. Вот CSS для эффекта, который отлично работает в Dreamweaver, но, похоже, не работает в любом браузере.

<style> 
    .css3-notification { 

    font-size: .8em; 
    text-align: center; 
    padding: 10px; 
    color: #2b2b2b; 
    margin-left: 20px; 
    position: relative;  
    font-weight: bold; 

    -webkit-animation: ease-in 800ms; 
    -moz-animation: ease-in 800ms;  
    -o-animation: ease-in 800ms; 
    animation: ease-in 800ms; 
} 

    @-webkit-keyframes ease-in { 
    from {top: -40px; opacity:0;} 
    to  {top: 0px;} 
} 

    @keyframes ease-in { 
    from {top: -40px; opacity:0;} 
    to  {top: 0px;} 
} 
</style> 

<div class="dock" id="dock"> 
<div class="dock-container"> 

<a class="dock-item" href="#"><img src="../Site images/Bill@2x.png" alt="home" /><span class="css3-notification"><font size="3">IDEATION</font><p>Put your idea on paper</p></span> 

<a class="dock-item" href="#"><img src="../Site images/Jesus@2x.png" alt="contact" /><span class="css3-notification"><font size="3">TEAM</font><p>Build a team</p></span> 

<a class="dock-item" href="#"><img src="../Site images/Financestat@2x.png" alt="music" /><span class="css3-notification"><font size="3">MVP</font><p>Track and compile data from testing</p></span> 

<a class="dock-item" href="#"><img src="../Site images/Dollarbag@2x.png" alt="video"/
> <span class="css3-notification"><font size="3">Funding</font><p>Find Funding</p></span> 

<a class="dock-item" href="#"><img src="../Site images/Spaceship@2x.png" alt="history" /><span class="css3-notification"><font size="3">LAUNCH</font><p>Successfully Launch</p></span> 

</div> 
</div> 

Answer 1

Не совсем уверен, как именно вы пытаетесь это сделать, но вот простой трюк, который может быть полезен. Изначально вы можете показать свое .css3-уведомление: none. Затем при наведении родительского .dock-item отобразите дочернее .css3-уведомление; как показано ниже:

a.dock-item:hover .css3-notification 
{ 
    display:block; 
}