0
Vraiment perplexe par celui-ci ... deux animations, même structure fondamentalement, et le JavaScript
pour eux aussi la même chose, mais une animation, fonctionnera comme souvent comme on veut planer sur
et l'autre, fonctionne exactement une fois sur le vol stationnaire, puis disparaît jusqu'à ce que la page est actualisé manuellement.Pourquoi une animation CSS fonctionne-t-elle plusieurs fois, une autre seulement une fois par pageload
préparé un jsFiddle all prettied up
et si quelqu'un souhaite, le codeblock ci-dessous est complet et prêt à fonctionner si vous avez votre pile prêt pour les essais; il serait prêt à copier et coller et fonctionne à illustrent le problème. Pourquoi l'animation div expansion expand opaque rouge ne s'exécute-t-elle qu'une seule fois?
<!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>
fonctionne très bien sur mon Chrome 23 ... – Passerby