This explores how to do CSS-style based animations, where the animations are controlled via Javascript code that adds and deletes class names from the className property.
This is basically how jQuery and Angular do CSS animations. jQuery also does animations by calculating the tween positions, but, that’s going to be obsolete because the mobile browsers now support CSS animations.
The hard part about understanding CSS animations (for me) was getting the concepts. This example tries to break down the parts of the animation. Try it out, and then read the code and comments.
<!DOCTYPE html>
<html>
<style type="text/css">
/* the styles that are the same between the two positions */
.box {
border: 1px solid silver;
margin: 2px;
}
/* the starting positions */
.small {
width: 20px;
height: 20px;
background-color: white;
}
/* the ending positions */
.big {
width: 300px;
height: 80px;
background-color: gray;
}
/* The animation is made up of two parts. Metainformation
about how long the animation runs, direction, and some other
things are set via styles named animation-*.
The @keyframes are the values for the styles that are rendered.
The CSS engine takes care of tweening between the keyframes.
To start an animation, you add the animation settings class
name to the element's className property.
*/
/* the animation settings */
.small-to-big {
animation-duration: 2s;
animation-name: grow;
}
/* the animation */
@keyframes grow {
/* this matches the starting class */
from {
width: 20px;
height: 20px;
background-color: white;
}
/* this matches the ending class */
to {
width: 300px;
height: 80px;
background-color: gray;
}
}
</style>
<script>
function animate( id, start, end, animation ) {
var e = document.getElementById(id);
/* When an animation completes, you need to replace
the starting class name with the ending class name.
So, we create a function that does that replacement.
It's a little clunky, yes.
The 'animationend' event is raised at the
end of the animation. We attach the handler
to that event.
*/
var finisher = function() {
/* The element may or may not have the classname of
the starting state.
Don't be afraid to add spaces all around.
*/
e.className = ( e.className.replace(start,' ') + ' ' + end );
/* We could leave the animation class name in there,
but it's nicer to be tidy.
*/
e.className = e.className.replace(animation, ' ');
};
e.addEventListener('animationend', finisher, false);
/* Then, we add the animation settings class to the
className, which starts the animation.
*/
e.className = e.className + ' ' + animation;
}
function boom() {
animate('b1','small','big','small-to-big');
animate('b2','small','big','small-to-big');
animate('b3','small','big','small-to-big');
}
</script>
<body>
<p>Three boxes that zoom out into three larger boxes.</p>
<!-- note that the small class, the initial style, is added -->
<div id="b1" class="box small"></div>
<div id="b2" class="box small"></div>
<div id="b3" class="box small"></div>
<button onclick="boom();">click</button>
</body>
</html>
<!--
- What HTML needs is an animation compiler that will take the starting
- and ending styles, and then emit the entire animation. It would
- calculate the common parts, the different parts, and make the keyframes,
- and write the javascript to control the animation.
-->| Attachment | Size |
|---|---|
| tween.html | 3.65 KB |