Following the previous post, I thought it would be good to outline how to get the CSS animations and event listeners responding across all browsers that support them.
I found, however, that Firefox is less consistent in its markup than Safari and Chrome, we therefore need to be careful. First, the CSS for the element that is going to be triggered at the end of the first animation needs the following CSS explicitly added:
-moz-animation-play-state: paused;
We also need to note that the events we are listening for are "animationstart" and "animationend" but to add the CSS style using Javascript to the element we would like to stop and start it is necessary to use MozAnimationPlayState, and this must be capitalized exactly as shown, which is neither written in the same case as webkitAnimationPlayState nor written animationPlayState as one might expect from the listeners.
For further clarification here is the code in full.
<!doctype html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
background-color: lightgray;
}
#block{
-moz-animation-play-state: paused;
/* duration set to required length in seconds */
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
/* name of keyframe animation sequence */
-webkit-animation-name: slidedown;
-moz-animation-name: slidedown;
/* fill-mode can be set to backwards or both in order to prevent display of contents before animation has begun */
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
/* position and size at the end of the animation */
margin-top: 25%;
padding-bottom: 100%;
/* other attributes that will be true throughout sequence and following it */
z-index:-1;
background-color: black;
}
#heading {
/* duration set to required length in seconds */
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
/* name of keyframe animation sequence */
-webkit-animation-name: slidein;
-moz-animation-name: slidein;
/* position at the end of the animation */
margin-left: 50%;
/* other attributes that will be true throughout sequence and following it */
background-color: lightgray;
padding: 10px;
padding-top: 400px;
color: white;
opacity: 0.6;
}
/* beginning of named keyframes corresponding with those named above */
/* assign a name to the keyframes sequence named slidein */
@-webkit-keyframes slidein {
/* set starting properties for animation sequence */
from {
margin-left: 100%;
width: 150%
}
/* set ending properties for animation sequence */
to {
margin-left: 50%;
width: 150%;
}
}
@-moz-keyframes slidein {
/* set starting properties for animation sequence */
from {
margin-left: 100%;
width: 150%
}
/* set ending properties for animation sequence */
to {
margin-left: 50%;
width: 150%;
}
}
/* assign a name to the keyframes sequence called slidedown */
@-webkit-keyframes slidedown {
/* set starting properties for animation sequence */
from {
margin-top: -10%;
height: 120%;
}
/* set ending properties for animation sequence */
to {
margin-top: 25%;
height: 120%;
}
}
@-moz-keyframes slidedown {
/* set starting properties for animation sequence */
from {
margin-top: -10%;
height: 120%;
}
/* set ending properties for animation sequence */
to {
margin-top: 25%;
height: 120%;
}
}
/* end of named keyframes */
</style>
<script>
var e;
function setup() {
e = document.getElementById('heading'); e.addEventListener("webkitAnimationStart", listener, false);
e.addEventListener("animationstart", listener, false);
e.addEventListener("webkitAnimationEnd", listener, false);
e.addEventListener("animationend", listener, false);
}
function listener(e) {
switch(e.type) {
case "webkitAnimationStart":
document.getElementById('block').style.webkitAnimationPlayState='paused';
break;
case "animationstart":
document.getElementById('block').style.MozAnimationPlayState='paused';
break;
case "webkitAnimationEnd":
document.getElementById('block').style.webkitAnimationPlayState='running';
break;
case "animationend":
document.getElementById('block').style.MozAnimationPlayState='running';
break;
}
}
</script>
</head>
<body onload="setup()">
<body>
<div id="block">
<h1 id="heading">SketchyTech</h1>
</div>
</body>
</html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
background-color: lightgray;
}
#block{
-moz-animation-play-state: paused;
/* duration set to required length in seconds */
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
/* name of keyframe animation sequence */
-webkit-animation-name: slidedown;
-moz-animation-name: slidedown;
/* fill-mode can be set to backwards or both in order to prevent display of contents before animation has begun */
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
/* position and size at the end of the animation */
margin-top: 25%;
padding-bottom: 100%;
/* other attributes that will be true throughout sequence and following it */
z-index:-1;
background-color: black;
}
#heading {
/* duration set to required length in seconds */
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
/* name of keyframe animation sequence */
-webkit-animation-name: slidein;
-moz-animation-name: slidein;
/* position at the end of the animation */
margin-left: 50%;
/* other attributes that will be true throughout sequence and following it */
background-color: lightgray;
padding: 10px;
padding-top: 400px;
color: white;
opacity: 0.6;
}
/* beginning of named keyframes corresponding with those named above */
/* assign a name to the keyframes sequence named slidein */
@-webkit-keyframes slidein {
/* set starting properties for animation sequence */
from {
margin-left: 100%;
width: 150%
}
/* set ending properties for animation sequence */
to {
margin-left: 50%;
width: 150%;
}
}
@-moz-keyframes slidein {
/* set starting properties for animation sequence */
from {
margin-left: 100%;
width: 150%
}
/* set ending properties for animation sequence */
to {
margin-left: 50%;
width: 150%;
}
}
/* assign a name to the keyframes sequence called slidedown */
@-webkit-keyframes slidedown {
/* set starting properties for animation sequence */
from {
margin-top: -10%;
height: 120%;
}
/* set ending properties for animation sequence */
to {
margin-top: 25%;
height: 120%;
}
}
@-moz-keyframes slidedown {
/* set starting properties for animation sequence */
from {
margin-top: -10%;
height: 120%;
}
/* set ending properties for animation sequence */
to {
margin-top: 25%;
height: 120%;
}
}
/* end of named keyframes */
</style>
<script>
var e;
function setup() {
e = document.getElementById('heading'); e.addEventListener("webkitAnimationStart", listener, false);
e.addEventListener("animationstart", listener, false);
e.addEventListener("webkitAnimationEnd", listener, false);
e.addEventListener("animationend", listener, false);
}
function listener(e) {
switch(e.type) {
case "webkitAnimationStart":
document.getElementById('block').style.webkitAnimationPlayState='paused';
break;
case "animationstart":
document.getElementById('block').style.MozAnimationPlayState='paused';
break;
case "webkitAnimationEnd":
document.getElementById('block').style.webkitAnimationPlayState='running';
break;
case "animationend":
document.getElementById('block').style.MozAnimationPlayState='running';
break;
}
}
</script>
</head>
<body onload="setup()">
<body>
<div id="block">
<h1 id="heading">SketchyTech</h1>
</div>
</body>
</html>
thanks for shared wonderful information of giving best information.its more useful and more helpful. great doing keep sharing
ReplyDeleteIELTS coaching classes in chennai