In the last post I outlined how to get CSS animations working sequentially in Firefox. It is also possible to do the same thing in Chrome and Safari. Apple outlines the code for doing so on their developer site. Once again not making the fill-mode property particularly prominent, and a little tricky to find if you don't know what you're looking for.
The good news is that to make the same code work on Chrome and Safari there is only one simple change required and that is to globally change "moz" to "webkit". For example, -moz-animation-duration should be changed to -webkit-animation-duration, -moz-animation-delay to -webkit-animation-delay, and so on (hence a quick find and replace will serve the purpose). The result of which should be:
If you want the code to work in Firefox, Chrome and Safari then simply add the webkit lines of code without deleting the moz ones. If you are using TextWrangler or another GREP enabled text editor then you can simply turn on GREP and use the following find and replace pair:
Find: (-moz)(.*)
Replace: \1\2\r -webkit\2
This will serve you well up until you reach the keyframes at which point you will have to double up the code like this:
The good news is that to make the same code work on Chrome and Safari there is only one simple change required and that is to globally change "moz" to "webkit". For example, -moz-animation-duration should be changed to -webkit-animation-duration, -moz-animation-delay to -webkit-animation-delay, and so on (hence a quick find and replace will serve the purpose). The result of which should be:
<html>
<head>
<style type="text/css">
body {
margin: 0;
background-color: lightgray;
}
h1 {
/* 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;
}
#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 */
-webkit-animation-delay: 6s;
/* 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 */
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 */
@-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>
</head>
<body>
<div id="block">
<h1>SketchyTech</h1>
</div>
</body>
</html>
If you want the code to work in Firefox, Chrome and Safari then simply add the webkit lines of code without deleting the moz ones. If you are using TextWrangler or another GREP enabled text editor then you can simply turn on GREP and use the following find and replace pair:
Find: (-moz)(.*)
Replace: \1\2\r -webkit\2
This will serve you well up until you reach the keyframes at which point you will have to double up the code like this:
/* 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%;
}
}
@-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 */
@-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%;
}
}
@-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 */
I hope this helps and I'm off now to test all this in iBooks, where CSS animations are recommended over and above Javascript.
Comments
Post a Comment