Применение анимации при выходе из состояния зависания

У меня есть анимация, которую я нашел в Интернете. Я могу применить их, когда я нахожу div, которому я присвоил класс, но я не могу понять, как оживить, когда я оставляю зависание.Применение анимации при выходе из состояния зависания

То, что я надеюсь получить, это панель управления, которая скользит вверх, когда я нависаю и сползаю вниз, когда я ухожу.

HTML:

<div id="controls" class="cAnimated fadeInUp fadeInDown"> 
     <div id="defaultBar"> 
       <div id="progressBar"></div> 
     </div> 
    <button id="playButton"><img src="images/icons/play.png" /></button> 
    <button id="vol" onclick="showSlider()"><img src="images/icons/vol.png" /></button>  
    <button id="containSlider"> 
    <input type="range" id="vSlider" min="0" max="1" step="0.1" value="0.5"/></button> 
    <div id='containTime'><span id='timeDisplay'>0:00</span><span>/</span><span id='durationDisplay'>0:00</span></div> 
    <button id="full"><img src="images/icons/full.png" /></button> 
    <button id="mute"><img src="images/icons/mute.png" /></button> 
</div>

CSS:

.animated:hover { 
    -webkit-animation-fill-mode: both; 
    -moz-animation-fill-mode: both; 
    -ms-animation-fill-mode: both; 
    -o-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-duration: 0.9s; 
    -moz-animation-duration: 0.9s; 
    -ms-animation-duration: 0.9s; 
    -o-animation-duration: 0.9s; 
    animation-duration: 0.9s; 
} 
.animated.hinge { 
    -webkit-animation-duration: 2s; 
    -moz-animation-duration: 2s; 
    -ms-animation-duration: 2s; 
    -o-animation-duration: 2s; 
    animation-duration: 2s; 
} 
@keyframes fadeInUp { 
    0% { 
     opacity: 0; 
     transform: translateY(5px); 
    } 

    100% { 
     opacity: 1; 
     transform: translateY(0); 
    } 
} 

.fadeInUp:hover { 
    -webkit-animation-name: fadeInUp; 
    -moz-animation-name: fadeInUp; 
    -o-animation-name: fadeInUp; 
    animation-name: fadeInUp; 
} 
@keyframes fadeInDown { 
    0% { 
     opacity: 0; 
     transform: translateY(-20px); 
    } 

    100% { 
     opacity: 1; 
     transform: translateY(0); 
    } 
} 

.fadeInDown { 
    -webkit-animation-name: fadeInDown; 
    -moz-animation-name: fadeInDown; 
    -o-animation-name: fadeInDown; 
    animation-name: fadeInDown; 
}

Подробнее Код: http://jsfiddle.net/EaC82/

источник

2013-02-16 Batman

Это намного чище с CSS переходов:

.fadeInUp { 
    -webkit-transition: all 300ms ease; 
    -moz-transition: all 300ms ease; 
    -o-transition:  all 300ms ease; 
    -ms-transition:  all 300ms ease; 
    transition:   all 300ms ease; 
    -webkit-transform: translate(0,10px); 
    -moz-transform:  translate(0,10px); 
    -o-transform:  translate(0,10px); 
    -ms-transform:  translate(0,10px); 
    transform:   translate(0,10px); 
    opacity: 0; 

} 

.fadeInUp:hover { 
    -webkit-transform: translate(0,0); 
    -moz-transform:  translate(0,0); 
    -o-transform:  translate(0,0); 
    -ms-transform:  translate(0,0); 
    transform:   translate(0,0); 
    opacity: 1; 
}

Demo: http://jsfiddle.net/k3Y5x/

источник

2013-02-16 16:47:39 Duopixel

Применение анимации при выходе из состояния зависания

ответ

Смежные вопросы