The previous post considered event listeners to record events and relay information about them, but event listeners can also be used in conjunction with CSS to stop and start animations. This removes the need to calculate when successive animations in a sequence should begin. It also enables a single animation to begin, for example, on a mouse click or some other event on the page and to then trigger further animations at completion.
First we need to add the style -webkit-animation-play-state to our CSS and this can be set to 'paused' or 'running', and this is exactly what the following script does.
Running this script we are dynamically adding -webkit-animation-play-state:'paused' to the CSS for our #heading element at the beginning of the #block element's animation and then overwriting the CSS in our #heading to -webkit-animation-play-state:'running' once the #block element has completed its animation. The effect of which is to start the keyframe animation specified in the CSS line -webkit-animation-name: slidein; in our #heading element only once the #block element has completed its animation.
We can therefore revise the code for Safari and Chrome posted yesterday to use event listeners in place of the crude timing calculation that was originally used like so:
<!DOCTYPE html>
<head>
<style type="text/css">
body {
margin: 0;
background-color: lightgray;
}
#block
{
/* duration set to required length in seconds */
-webkit-animation-duration: 3s;
/* name of keyframe animation sequence */
-webkit-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;
/* position and size at the end of the animation */
/* other attributes that will be true throughout sequence and following it */
z-index:-1;
background-color: black;
padding-bottom: 100%;
}
#heading {
/* duration set to required length in seconds */
-webkit-animation-duration: 6s;
/* name of keyframe animation sequence */
-webkit-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%;
}
}
/* 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%;
}
}
/* end of named keyframes */
</style>
<script>
function setup() {
var e = document.getElementById("block");
e.addEventListener("webkitAnimationStart", listener, false);
e.addEventListener("webkitAnimationEnd", listener, false);
}
function listener(e) {
switch(e.type) {
case "webkitAnimationStart":
document.getElementById('heading').style.webkitAnimationPlayState='paused';
break;
case "webkitAnimationEnd":
document.getElementById('heading').style.webkitAnimationPlayState='running';
break;
}
}
</script>
</head>
<body onload="setup()">
<body>
<div id="block">
<h1 id="heading">SketchyTech</h1>
</div>
</body>
</html>
Remember this is Safari and Chrome only, so it won't work in Firefox, IE or Opera. For a version that works in Firefox, Chrome and Safari see this blogpost.
First we need to add the style -webkit-animation-play-state to our CSS and this can be set to 'paused' or 'running', and this is exactly what the following script does.
<script>
function setup() {
var e = document.getElementById("block");
e.addEventListener("webkitAnimationStart", listener, false);
e.addEventListener("webkitAnimationEnd", listener, false);
}
function listener(e) {
switch(e.type) {
case "webkitAnimationStart":
document.getElementById('heading').style.webkitAnimationPlayState='paused';
break;
case "webkitAnimationEnd":
document.getElementById('heading').style.webkitAnimationPlayState='running';
break;
}
}
</script>
function setup() {
var e = document.getElementById("block");
e.addEventListener("webkitAnimationStart", listener, false);
e.addEventListener("webkitAnimationEnd", listener, false);
}
function listener(e) {
switch(e.type) {
case "webkitAnimationStart":
document.getElementById('heading').style.webkitAnimationPlayState='paused';
break;
case "webkitAnimationEnd":
document.getElementById('heading').style.webkitAnimationPlayState='running';
break;
}
}
</script>
Running this script we are dynamically adding -webkit-animation-play-state:'paused' to the CSS for our #heading element at the beginning of the #block element's animation and then overwriting the CSS in our #heading to -webkit-animation-play-state:'running' once the #block element has completed its animation. The effect of which is to start the keyframe animation specified in the CSS line -webkit-animation-name: slidein; in our #heading element only once the #block element has completed its animation.
We can therefore revise the code for Safari and Chrome posted yesterday to use event listeners in place of the crude timing calculation that was originally used like so:
<!DOCTYPE html>
<head>
<style type="text/css">
body {
margin: 0;
background-color: lightgray;
}
#block
{
/* duration set to required length in seconds */
-webkit-animation-duration: 3s;
/* name of keyframe animation sequence */
-webkit-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;
/* position and size at the end of the animation */
/* other attributes that will be true throughout sequence and following it */
z-index:-1;
background-color: black;
padding-bottom: 100%;
}
#heading {
/* duration set to required length in seconds */
-webkit-animation-duration: 6s;
/* name of keyframe animation sequence */
-webkit-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%;
}
}
/* 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%;
}
}
/* end of named keyframes */
</style>
<script>
function setup() {
var e = document.getElementById("block");
e.addEventListener("webkitAnimationStart", listener, false);
e.addEventListener("webkitAnimationEnd", listener, false);
}
function listener(e) {
switch(e.type) {
case "webkitAnimationStart":
document.getElementById('heading').style.webkitAnimationPlayState='paused';
break;
case "webkitAnimationEnd":
document.getElementById('heading').style.webkitAnimationPlayState='running';
break;
}
}
</script>
</head>
<body onload="setup()">
<body>
<div id="block">
<h1 id="heading">SketchyTech</h1>
</div>
</body>
</html>
Remember this is Safari and Chrome only, so it won't work in Firefox, IE or Opera. For a version that works in Firefox, Chrome and Safari see this blogpost.
Comments
Post a Comment