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