A guide to CSS animations in Firefox can be found on the Mozilla Developer Network site. There you will find information on how to set the duration, keyframes and delay of your animation, but the one thing that doesn't quite receive the attention it deserves is the rather oddly named -moz-animation-fill-mode.
It is the setting of the "fill mode" that determines whether the end point or the beginning point of the animation is displayed on the screen when the page first loads. If you wish for example one element to slide up and then another to slide in, then this will be a very useful setting, and in such an instance needs its value set to "backwards" or "both".
In order to demonstrate such a scenario using keyframes, cut and paste the below code into an .html file and load it in your Firefox browser (this will not work in Internet Explorer or Safari, they will ignore all keyframes references, leaving the page in its static end state).
It is the setting of the "fill mode" that determines whether the end point or the beginning point of the animation is displayed on the screen when the page first loads. If you wish for example one element to slide up and then another to slide in, then this will be a very useful setting, and in such an instance needs its value set to "backwards" or "both".
In order to demonstrate such a scenario using keyframes, cut and paste the below code into an .html file and load it in your Firefox browser (this will not work in Internet Explorer or Safari, they will ignore all keyframes references, leaving the page in its static end state).
<html>
<head>
<style type="text/css">
body {
margin: 0;
background-color: lightgray;
}
h1 {
/* duration set to required length in seconds */
-moz-animation-duration: 6s;
/* name of keyframe animation sequence */
-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;
}
#block{
/* delay is set to be the same as the duration of the first animated element, i.e. in this instance h1, so that it begins after the first animation has finished */
-moz-animation-delay: 6s;
/* duration set to required length in seconds */
-moz-animation-duration: 3s;
/* name of keyframe animation sequence */
-moz-animation-name: slidedown;
/* fill-mode can be set to backwards or both in order to prevent display of contents before animation has begun */
-moz-animation-fill-mode: both;
/* position and size at the end of the animation */
margin-top: 25%;
height: 120%;
/* other attributes that will be true throughout sequence and following it */
z-index:-1;
background-color: black;
}
/* beginning of named keyframes corresponding with those named above */
/* assign a name to the keyframes sequence named slidein */
@-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 */
@-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>
</head>
<body>
<div id="block">
<h1>SketchyTech</h1>
</div>
</body>
</html>
While -moz-animation-duration and -moz-animation-delay are self explanatory, and one can use simple logic to determine that if one animation is to begin after another has finished then the delay of the second must equal the duration of the first, less obvious is the need for -moz-animation-fill-mode but in a scenario as outlined above it is absolutely essential.
Comments
Post a Comment