离开悬停状态时应用动画

Question

我有一些我在网上找到的动画。我能够应用他们，当我徘徊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/

Answer 1

这是干净多用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; 
} 

演示：http://jsfiddle.net/k3Y5x/