Animating An ePicturebook: Pollywog Tails
July 06, 2017
When we speak of animation on the web, video animation such as that seen on YouTube or Vimeo comes immediately to mind—or we think of animated GIFs such as those gaining popularity these days as “cinemagraphs.” These are relatively easy to make so why not simply add videos or animated GIFs to a digital picture book? Why go to the trouble of animating with HTML and CSS when there are abundant tools available to create videos and animated GIFs?
It’s a good question, one that I believe is answered in part by first understanding that an e-book is just a website masquerading as a book. Like a website, every page of a fixed layout e-picturebook is a separate HTML document (okay, an XHTML document) styled with CSS markup. So animating the images using HTML and CSS does not “add on” the animation as a video or GIF but builds the animation into the book as an integral part of the code—its DNA. And CSS animation is “open source” with no third party players to download, and no player controls intruding on the pictures. The “player” for CSS animation is the browser itself, already installed on every device. And that browser gets its instructions from the HTML and CSS.
Creating animations with CSS markup also reduces file size. Instead of downloading a 30-second video with possibly 720 individual motion frames, a small number of images are downloaded and instructed to move, rotate, scale, skew and much more with CSS transforms. Smaller file sizes mean quicker, smoother playback. And the very best part is—it’s not rocket science! Anyone can quickly learn enough HTML and CSS to animate a book. One of the best learning resources I’ve found is Lynda.com.
So what’s not to like, and why aren’t more people animating with CSS? Well, remember that the browser is the “player” for this type of animation? You guessed it, the Kindle Fire browser doesn’t play CSS animations (yet), even though the animation functions are a web standard according to the World Wide Web Consortium (W3C), and despite the fact that all the current versions of major web browsers will play most of the animation specification. If the device of choice for the largest e-book seller can't handle the animation, that's a major disincentive to creating animated picture books with CSS. Perhaps that will change when Amazon wakes up to discover that Apple controls the market for animated picture books that are not apps or games. If only Apple would recognize their advantage here and bring the iBooks Store into the twenty-first century!
One final thought: when I say that all the major web browsers support the W3C animation standard, that statement comes with a caveat. Currently, the animation declarations must include a vendor prefix to function properly, eg. -webkit- for Google Chrome and Safari, -moz- for Firefox Mozilla, -ms- for Microsoft IE 9 or greater, and -o- for the Opera browser. I add the -webkit- vendor prefix for the CSS in this demonstration because my book is intended to be read on the iPad (Safari), but a typical markup with all the vendor prefixes would look like this:
img.ripples
{
position: absolute;
width: 512px;
height: 600px;
top: 0;
left: 0;
z-index: -1;
padding: 0;
margin: 0;
opacity: 0;
-moz-animation: pondRipples 1s ease-in-out 0s infinite alternate forwards;
-webkit-animation: pondRipples 1s ease-in-out 0s infinite alternate forwards;
-o-animation: pondRipples 1s ease-in-out 0s infinite alternate forwards;
-ms-animation: pondRipples 1s ease-in-out 0s infinite alternate forwards;
animation: pondRipples 1s ease-in-out 0s infinite alternate forwards;
}
@-moz-keyframes pondRipples {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes pondRipples {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes pondRipples {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes pondRipples {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes pondRipples {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
You can see the full CSS markup with prefixes for the following pollywog demonstration by clicking on the page spread below, then viewing the “page source” from your browser toolbar (usually found under View>Developer>Source or Tools>Developer>Page Source or Develop>Show Page Source).
