Creating a Lightweight CSS3 Animation with Just One Image

I’ve gotten a lot of requests lately asking how I managed the animations on my site without any flash.  Easy.  Just a bit of CSS3 and basic HTML markup.  Here’s how I did it, clean and simple.

Make yourself a frame-by-frame animation (I actually did this one by filming my dog running around in a circle, then imported certain frames into Photoshop and hand-converted the whole thing into pixels – fun, but time-consuming, indeed).  As long as each “frame” is the same width, you can make this animation as long as you want.  Keep in mind: the more frames you have the less “lightweight” your animation will be (especially for mobile devices short on juice).

 

murphy

this is one image

 

Of course, we’ll have to create an element for the animation to run in.  A simple div will do just fine.

Then, target that div with some CSS3 that defines the animation duration and size of each frame, as well as how many frames make up the entire sequence.  The dog animation has 7 states, so we’ll call it 7 frames.  (The cat animation at the top of this site has 6 frames, by contrast)

Then, we’ll make each browser behave similarly by defining the position of the first frame and where to reset the animation once it loops through.  I haven’t done it here, but you can give your animation an intro that only plays on the first iteration through —  just set your reset to a frame somewhere in the middle of the animation.

And, we’re done.  Seriously.  That’s it.  Now, go pixellate your pets and make the web a happier place!

Dave Winter focuses in WordPress UI Design and WordPress Plugin Development (some have labelled him a fanatic) but has hands in many other projects, including photography and music. He's never far from a computer... or an iPad (for testing purposes, of course). If you've been to a WordCamp in Southern California, he probably already knows who you are (or maybe not - he's terrible with names). Dave currently teaches courses at California State University, Long Beach alongside his small business at dauid.us (and his students think he's pretty boss).

Comments

  1. I have tried to cut and paste the code you have above and can not get it to work. Are you using 7 images or one?

    • Dave Winter says:

      Sandra,

      I’m just using one image (drag and drop it onto your desktop for the proof). Remember, your HTML needs a div with an ID of whatever css selector you’ll be using (mine is #dog). And, both of those blocks of CSS should go into the same CSS file.

      A note: this probably isn’t supported on browsers older than IE9, or anything else before 2011-ish.

      Good luck!

  2. Great tut, thanks.

  3. Dave Winter says:

    Terry,

    I’m sorry I cannot be of more help. In order to do what you’re wanting to do (that is, include the exported HTML5/CSS content in your WordPress project) you are going to have to know code. You would include that code either within your theme template file, or paste it in the “text” editor on your WordPress page/post. You’ll then need to somehow include the exported CSS in your theme. This would best be done by enqueuing the CSS file in either your functions.php file or in a plugin.

    It sounds like either way, this might be a bit over your head, as it will require some code knowledge.

    But, you can learn it by following some code tutorials you can find online. It just takes some time and patience. In fact, I’ve never taken a design or development course in my life… totally self-taught here. And, mostly by investing time and patience.

    Good luck to you.
    – Dave

  4. hi dave,,well once again you have prooved yourself to very knowledgeable and i thank you for spending the time.I agree with you in regards to using the flash plugin version of flash in a browser but from my understanding adobe has now created this flashcc that uses jscreate to export to html5,,,it creates all the css,html for you without hhaving to know html5 which I have difficulties with as I am not a professional web designer as yourself…..Normally when you try to run a flash movie it asks to activate the plugin ,,but I have now proved that this jscreate does not use this plugin by watching my animation on my android tablet,,,firefox and dolphin browser,,,,this prooves to me that the file must be in html5 format similar to yours……am I right in this assumption?
    unlike you I like using flash because its visual and i can use illustrator to create the objects very easily and just drop them in to flash….SO if I am right in regards to the export function of flash I really dont see any reason not to use the flash timeline system unless once again I am missing some point which i would not be surprised… thx

  5. thanks,,,there must be a conspiracy,,,i just had a look at a flash player plugin for wordpress,2014,,,JWplayer,,,last question but please answer,,,why would wordpress allow these flash plugins to be used if its old technology…..this is what i cant get my head around,,,every one sais dont use flash but theres all these plugins and flash createjs to continue the use of it,,,,do all these programs still in a way use Flash and should they be lined up the wall and shot once and for all….and we should all learn to use html5 and css,,,,is this the only alternative these days?
    if you answer this i promise not to harass you any longer….ha….

    • Dave Winter says:

      Terry,

      It sounds like you really want to use flash for your animation. I can’t change your mind, but I’ll try. Like I said before, I’m not a flash man.

      WordPress is in an interesting situation as a CMS. It is a software that is maintained by the company Automattic, but contributed to by anyone who wants to (and can prove they have the code skills). There are also very few plugins that are created or maintained by Automattic. Almost every plugin and theme are community driven, meaning that individuals, small businesses or companies create them, either for profit or as an easy way to gain recognition. There is a process to submit these plugins in which someone from Automattic takes a quick look through the code. But that process is fairly lenient and most or the requirements are dependent on how the plugin is named, whether or not any ads show up or making sure the plugin works (loosely used) with WordPress. As of now, there are over 35,000 WordPress plugins. That couldn’t happen if Automattic restricted a lot of them.

      In other words, Automattic is not trying to limit the amount and availability of plugins for its software. They’re trying to cast as wide a net of users as possible. Because they’re smart. And, if some of those users want to use flash, they’re perfectly fine letting them do so. Even though flash is becoming an outdated technology, some people will insist on continuing to use it. Automattic is right to allow them to. An embedded flash media, after all, works just fine with WordPress.

      The big problem with outdated technology comes if and when browsers and devices stop supporting them. Chrome and Firefox are at the top of the browser war right now and have the unique opportunity to somewhat control the landscape of web technology. And Chrome has already killed support for some older technologies. no longer supported by chrome If and when Chrome decides to kill support for flash, it will cease to work for those using that browser. Apple has already killed support for flash on mobile devices and tablets. And, with ever-increasing prices wireless companies charge for data usage, I expect to see more follow that trend. In my experience, flash is more resource-hungry than HTML5 (if done right).

      Now, I don’t see Chrome doing this very soon – they know that some sites still use flash and they also want the largest audience for their product. But, Chrome is also very focused on Web Standards, which flash does not support well at this time. Web Standards are things like graceful degradation for browsers that lack support for a certain technology (like javascript or some CSS3 attributes). Flash has no degradation… you can either view it or not. This goes against Web Standards, and is one of the reasons I won’t use flash again. It is true, as you mentioned above, that flash now allows you to “export” flash content to HTML5. But, if your content is going to display as HTML5, why not just write it in HTML5? It seems like using flash for this purpose will only hurt you in the future, as HTML5 can already do things flash can’t. And, doing this also relies on Adobe’s software to export that content correctly. Too many potential problems, IMO. May as well just learn the new technology, right?

      There are also things like accessibility and responsive design to think about. I’m sure the flash export doesn’t support these things, and they’re some of the more sought-after services by folks looking for high-end websites these days. Bottom line is, HTML5 and the benefits that come with it are miles ahead of flash and pulling further ahead. If you’re serious about web design/development as a source of income, you should get serious about learning the technologies that make the web work. Keep flash in your arsenal of tools, if you must, but know that fewer companies and individuals are seeking out flash development. I’ve had several clients say things during the initial consultation like “You don’t do flash, do you?”, which clearly tells me that the knowledge of flash’s shortcomings are widespread. I’ve always been about giving my clients the best product I can at the time. And, i just simply don’t believe that flash is the best product at this time.

      Do some Googling on topics like “Flash vs HTML” or “should I use flash” to see what other developers feel about this. And, keep in mind that articles written before 2010-ish are considered outdated on this topic.

      And, as far as “harassing” me… that’s not how I see it. You’re looking for advise. But, you may be barking up the wrong tree if you want to continue using flash. My advise will always be to not use flash. But, that’s just one developer’s view. Hopefully, I’ve clearly outlined my main reasons for thinking this way.

      -Dave

  6. Dave Winter says:

    Terry,

    I understand your frustration. Its not really that flash can’t be used, but that there are far more accessible options out there to create very similar effects. I used to develop in flash, but for large or complicated projects, I found flash required learning code, too. Back then, it was Actionscript. ::shudder:: I prefer not to think of those days.

    The links I provided above came from a very quick search on the WordPress.org plugin listing. I have not tested these and can’t respond to how they work on a website. I can tell you, though, that you can embed flash on any webpage. It doesn’t matter if its WordPress or Magento or Drupal… all you’re doing is embedding a file on a page.

    And, I’m not surprised you can’t get a decent reply to this in the flash forums… the pool of flash developers is vastly smaller than other developer communities, largely because the general consensus is that flash is dying out. I know I will never go back to using it. Its old technology. You have to wait for the flash file to fully load before you can see content. It doesn’t work on some devices. And, it often involves writing code, anyways.

    So, let me redirect this to the tutorial again, if I may. Implementing this really is about as straight-forward as embedding a flash file in a WordPress page… maybe moreso. Here’s what you need to know about this tutorial to get it working. All the code in my tutorial is CSS. You just need to create a div in your HTML/PHP file and make sure the ID is targeted in your CSS. And, you’ll need a carefully created image with multiple “frames” (not really frames… if your image has 3 frames, the full width must be 3 times the width of the first frame). That’s it. Just HTML and CSS. No embedded media or other hassle.

    As for the reply from flash support staff, that seems cool, but not really of interest to me. Once you spend enough time working with HTML5 and CSS3 animations, it actually becomes quicker and easier to just do it that way.

    Good luck,
    Dave

  7. Dave Winter says:

    Terry,

    I haven’t used flash in years, so I can’t really lend you any advice as to how to embed it on a page. However, it looks like there are a few WordPress plugins to help you out.

    https://wordpress.org/plugins/kimili-flash-embed/
    https://wordpress.org/plugins/ultimate-swf-flash-display-widget/
    https://wordpress.org/plugins/flash-show-and-hide-box/

    As always, however, I will warn you about the dangers of using flash on a modern website. Chances are, many of your visitors are using devices that don’t support flash, so that content will never be seen by them. Flash is also pretty resource-hungry, so it may display slowly/choppy on devices that do support it. I wrote an article about those dangers here: https://www.dauid.us/blog/flash-flash/

    Really, I’d say its just as easy to use an animation like the one in this tutorial. What part of it was confusing? Perhaps I can be of better help to you by helping you figure out how to use this animation.

    • thanks for your advice,,,I keep hearing that flash cant be used so why do we still use .swf files,,is that not flash? and flashcc comes with an export function which supposedly does not use flash to play it but uses html……I have not been able to get a decent reply to this even in the flash forums…
      I have to laugh when you say “what part is confusing”….I have great admiration for people like you who can understand all this stuff ,its like a stroll in the park to you but to me and I am sure I am not alone,its a completely nightmare and what makes it that is the complete lack of ,yes hard to believe but actuall information that actually makes sense and not snippets here and there on forums by people who dabble,,,and because of the fragmented nature of so many different software and plugins that more or less work…and the fact that each program is out there to sell and make money…and its up to you to find out how to use it…and i have just done a web design course believe it or not,,,and my teacher is like you ,you live it,,,he is a fountain of knowledge……..and you are no doubt worth [$] per hour and if this animation was so important I would hire you on……
      you say you dont know much about flash but it may be of interest to you to find out what they are now producing with this flash “jscreate” function,,,,i really think its there way to create what you did in a more easy non programming way,,great for me….that can be used in websites without the flash player….
      pls keep me posted if you can be bothered with the venture……
      thx again…

    • hello again
      just to make it perfectly clear ,the 3 links above for wordpress flash embed,,Are they using flash? if so why would wordpress allow that if as you told me Flash should not be used…Once again there is this misunderstanding in the world of web,,how can I not be confused? So should I use these or not?

    • hi dave again,
      you may be interested in this reply i got from a support staff of flash cc….

      “It’s not super complicated – EaselJS lets you do a lot of cool stuff with the Canvas. Flash is an awesome tool for animating – but the SWF format (typical Flash on the web using a plugin) is not very popular anymore.

      To address this, gskinner created a Flash panel with cooperation from Adobe, which exports Flash content to HTML5 (using Flash’s JavaScript layer, JSFL). This worked really well, and in the latest Flash version, Adobe made the export built-in, so you can make HTML5 documents, and all features not supported are disabled in Flash.

      The code that Flash exports is EaselJS code. You don’t need to do anything more with EaselJS (it should just run in the browser), but the code that is generated is readable, and easy to work with if you want to extend it.

  8. hi,
    although a nice little animation some of us dont know enough coding to do this which is why i used flash cc to create an html animation, as I believe that we are no longer supposed to use the Flash Player but use the newer html5 language and canvas etc which is what i think flash cc converts it to ….I have tried it but cannot figure out how to insert this flash.html file into a wordpress page….any ideas anyone…

Let me know what you're thinking

© 2008-2018, dauid.us