离开悬停状态时应用动画答案

【问题标题】：Applying animation when leaving hover state离开悬停状态时应用动画
【发布时间】：2013-02-01 08:25:47
【问题描述】：

我有一些我在网上找到的动画。当我将已分配类的 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/

【问题讨论】：

标签： html css css-selectors css-transitions

【解决方案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/

【讨论】：