真的被这个难住了......两个动画，基本上相同的结构，
它们的 JavaScript 也相同，但是一个动画会像一个想要悬停在
它上面一样频繁地工作，而另一个动画在悬停时只工作一次，然后消失，直到手动刷新页面。
准备了一个 JSfiddle ，
如果有人愿意的话，如果你的堆栈准备好进行测试，下面的代码块已经完成并且可以运行了；它将准备好复制和粘贴并运行以说明问题。
总结：为什么红色不透明的展开div动画只运行一次？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<Head>
<Title>Bleu Goat F</title>
<meta http-equiv="X-UA-Compatible" ; content="text/html application/pdf text/plain text/css text/php; charset=utf-8"
;>
<link rel="stylesheet" type="text/css" href="Some Name CSS FuddleDuddle.css"
/>
<script type="text/JavaScript">
window.onload = function () {
var el = document.getElementById("el");
var button = document.getElementById("button");
el.addEventListener("webkitAnimationEnd", function (evt) {
el.className = "hidden";
}, false);
el.addEventListener("mouseover", function (evt) {
el.className = (window.WebKitAnimationEvent) ? "hiding" : "hidden";
}, false);
button.addEventListener("webkitAnimationEnd", function (evt) {
button.className = "bottomFADED";
}, false);
button.addEventListener("mouseover", function (evt) {
button.className = (window.WebKitAnimationEvent) ? "expandDown" : "bottomFADED";
}, false);
}
</script>
<style type="text/css">
/* 6:05 PM Monday, January 07, 2013
Animation code for teal color *div el*
Animation code for mouseover/reveal div *button* */
#el {
position:absolute;
top:7px;
left:17px;
width:153px;
height:32px;
background-color:teal;
border:1px solid white;
font-size:17px;
font-family:palatino linotype;
display:block;
cursor: pointer;
z-index:160;
}
div.hiding {
-webkit-animation-duration: 3s;
-webkit-animation-name: fade-out;
-webkit-animation-iteration-count:1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-play-state: running;
-webkit-animation-direction: alternate;
}
div.hidden {
display: none;
}
@-webkit-keyframes fade-out {
from {
background-color:yellow;
opacity: .3;
}
to {
background-color:teal;
opacity: .9;
}
}
/* *************************************** */
/* Codeblock For Div Which **Should** become
visible upon hovering over Name there on the
Menu bar, and animate, increasing in size
downward and becomeing more opaque (redder)
then stopping, then finishing the animation and
disappearing.
*/
@-webkit-keyframes slidein {
from {
background-color:transparent;
width:62px;
height:25px;
}
to {
background-color:red;
opacity: 0.6;
width:62px;
height:73px;
}
}
#button {
position:absolute;
top:7px;
left:149px;
width:62px;
height:25px;
display: block;
z-index:100;
}
#button.bottomFADED {
display:none;
}
#button.expandDown {
-webkit-animation-duration: 2s;
-webkit-animation-name: slidein;
-webkit-animation-iteration-count:1;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
-webkit-animation-timing-function: ease-in-out;
-webkit-transition: height 2s ease-in-out, background-color 2s, width 2s, margin 2s, color 2s, font-size 2s, z-index 1s;
position: absolute;
top:7px;
}
/* Below: the simple CSS transition on a div;
it is in the red square below *Name* item on
the brown Menu Bar.
It is triggered by a :hover. Not an animation,
and works reliably.
*/
#BlackAsHeidizHeart {
position:absolute;
top:32px;
left:107;
width:62px;
height:48px;
border:1px solid red;
z-index:100;
}
#suresureBOSS22 div {
position:absolute;
top:32px;
left:164px;
width:53px;
height:43px;
background-color:transparent;
color:#30000C;
border:1 solid transparent;
z-index:12;
font-family:French Script MT;
font-weight:bold;
font-style:oblique;
font-size:0px;
z-index:55;
-webkit-transition: height 2s ease-in-out, background-color 2s, width 2s, font-size 1s, border .3s;
-webkit-transition-timing-function: cubic-bezier(0.600, -0.230, 0.735, 0.845);
}
#suresureBOSS22 div:hover {
position:absolute;
top:32px;
left:164px;
width:151px;
height:47px;
background-color:green;
color:#30000C;
border:2px solid white;
z-index:12;
font-family:French Script MT;
font-weight:bold;
font-style:oblique;
font-size:15px;
z-index:55;
-webkit-transition: height 2s ease-in-out, background-color 2s, width 2s, font-size 1s, border 3s;
-webkit-transition-timing-function: cubic-bezier(0.600, -0.230, 0.735, 0.845);
}
/* ************************* */
/* The uninteresting page~stuff */
/* body */
#VerdadSIxCorpusZsestyJa {
background-color:#A9D4B6;
color:black;
font- size:12px;
color:black;
}
/* main div */
#BigPicturesScreen {
position:absolute;
top:3px;
left:3px;
width:97%;
height:273px;
background-color: #112299;
color:black;
border-top-color: rgb(198, 132, 19);
border-top-style: inset;
border-top-width: 3px;
border-right-color: rgb(198, 132, 19);
border-right-style: inset;
border-right-width: 3px;
border-bottom-color: rgb(198, 132, 19);
border-bottom-style: inset;
border-bottom-width: 3px;
border-left-color: rgb(198, 132, 19);
border-left-style: inset;
border-left-width: 3px;
font-size:31px;
font-family:bookman old style;
font-style:normal;
z-index:2;
}
/* top outter div */
#SequesterJSFiddleCODE {
position:absolute;
top:47px;
left:19px;
width:200px;
height:53px;
background-color:#8DA57C;
border:2px solid forestgreen;
font-size:17px;
font-family:tahoma;
z-index:140;
}
/* grey div with green border, holds MenuBar */
#CODExSnippetNumberSupport {
position:absolute;
top:173px;
left:5px;
width:273px;
height:74px;
background-color:lightgrey;
border:3px solid forestgreen;
-webkit-border-radius: 0.5em 0.5em 0.5em 0.5em;
font-size:11px;
font-family:tahoma;
padding-top:3px;
padding-right:0;
padding-bottom:3px;
padding-left:12px;
z-index:10;
}
/* the lower, Menue Bar, dark brown */
#TitleOfTitleThingyie {
position:absolute;
top:3px;
left:16px;
width:237px;
height:19px;
background-color:#30000C;
color:white;
border:4px solid #AFEF23;
-webkit-border-radius: 1.2em 1.2em 1.2em 1.2em;
font-size:14px;
font-family:bookman old style;
padding-top:3px;
padding-right:0;
padding-bottom:3px;
padding-left:12px;
z-index:15;
}
/* the div holding that 7, on Menu Bar */
#JobCrrnt {
position:absolute;
top:0px;
left:79px;
width:29px;
height:19px;
background-color:#30000C;
color:white;
border:none;
font-size:14px;
font-family:bookman old style;
padding-top:3px;
padding-right:0;
padding-bottom:3px;
padding-left:12px;
z-index:15;
}
</style>
</head>
<body id="VerdadSIxCorpusZsestyJa">
<div id="BigPicturesScreen">
<div id="SequesterJSFiddleCODE">
<br />
<div id="el">Hide Me    *div el*</div>
<!-- el -->
</div>
<!-- SequesterJSFiddleCODE -->
<div id="CODExSnippetNumberSupport">
<div id="Shellnum1" class="hover">
<div id="suresureBOSS22" class="hover">
<div id="BlackAsHeidizHeart" class="hover">Why Must WE, Suffer?
<br />HA! why not :)</div>
</div>
<!-- suresureBOSS22 -->
<a href="#" id="button" style="text-decoration:none;" class="hover"></a>
</div>
<!-- Shellnum1 -->
<div id="TitleOfTitleThingyie">    Job #
<div id="JobCrrnt">   7</div>              
     Name</div>
<!-- TitleOfTitleThingyie -->
</div>
<!-- CODExSnippetNumberSupport -->
</div>
<!-- BigPictureScreen -->
<body>
</html>