Animated Images

Previous posts of mine discussed animating images. How about animated images in an animated 3-D cube?

My nine GIF Animation posts in the order presented:

1 – Animation – Photos and Otherwise

2 – Animated GIF Images

3 – Animated GIF Software – Rudimentary Features

4 – Adding Falling Snow, Part 1 – Still Images

5 – Adding Falling Snow, Part 2 – Animated Images

6 – Adding Falling Snow, Part 3 – It’s Snowing!

7 – A Plug-in for Making Falling Snow

8 – Animating Sunrise & Sunset

9 – Animated GIF Photos – The End


This next display illustrates that there’s more than one way to animate an image. In fact, this one further animates an already animated (the GIF) image.

Animated 3-D cube + Animated GIF “Running Dog” (pure CSS)

Front side
_DSC4327_nx
Back side
wordpress
Top side
info button
dogrun
Bottom side_DSC4327_nx sep2
Left sidedogrun
Right sidedogrun

 

Hover over the cube for an exploded view
The back of each side properly shows the reverse of its front
Are we having fun yet? 😉

Of the techniques shown in the past three posts, this one is most likely to fail. It works with the current versions of Chrome and Firefox and doesn’t work with any version of IE due to failure to support the CSS3 transform-style: preserve-3d property (as I said in the last post – avoid IE if you can).


Subscribe (see sidebar) and don’t miss anything. New posts daily.

  • No sidebar? Click here or the blog title at the top of this page.

2 thoughts on “Animated Images

  1. Ed,
    Just some feedback on the issues with IE.
    I recently upgraded IE on my computer from IE10 to IE11 for similar issues to what you have above but found it made virtually no difference. However if you open up the Developer Tools (press F12) then go to the tab thal looks like a monitor, click on that tab and change the setting from the default to one setting higher, the page will refresh and the animations will usually work.
    Note: The Developer Tools window needs to remain open for this to continue working.
    It’s a pain in the butt to have to do this but it is a workaround!

    • Thanks for that info. Unfortunately, IE 11 doesn’t yet support all of the CSS3 3D transform properties thus the reason for its problems with this cube. MS says that support is on-going so maybe we’ll see it soon.

Comments are closed.