Experimental CSS3 Animations for Image Transitions

Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We'll be using CSS3 3D Transforms for Webkit only.

ImageTransitions

View demo Download source

Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. Check out the Photo Transitions at the Safari Technology Demos site, some of which we got inspired by.

The images used in the demo are by Joanna Kustra.

Please note that the 3D effects will only work in Webkit browsers. You can view a video of how the effects look here: Experimental CSS3 Animations for Image Transitions Video Demonstration

How it works

Given a set of images, we’ll add the first image to the wrapper with the class te-cover. With JavaScript we’ll control the transition classes given to the elements in the wrapper te-transition and which image will be shown. This is how the first example looks like:

<div id="te-wrapper" class="te-wrapper">
	<div class="te-images">
		<img src="images/1.jpg"/>
		<img src="images/2.jpg"/>
		<img src="images/3.jpg"/>
		<img src="images/4.jpg"/>
		<img src="images/5.jpg"/>
	</div>
	<div class="te-cover">
		<img src="images/1.jpg"/>
	</div>
	<div class="te-transition">
		<div class="te-card">
			<div class="te-front"></div>
			<div class="te-back"></div>
		</div>
	</div>
</div>

The main idea is to always show the regarding image using te-cover. When we start an animation by giving the respective animation class, the te-cover will get hidden while the animation runs. When the animation finishes, the te-cover element will be shown again, with the updated image.

Demos

Each demo will have a group of possible transitions that can be selected from the dropdown menu above the image.

  1. Demo 1: Flip
  2. Demo 2: Rotate
  3. Demo 3: Multi-Flip
  4. Demo 4: Cube
  5. Demo 5: Unfold
  6. Demo 6: Others

We hope you like our little experiment and find it inspiring and useful!

View demo Download source

Previous:
Next:

Tagged with:

Related Articles

Feedback 45

Comments are closed.
  1. 1

    Doesn’t work in Firefox :(
    But it looks amazing in Chrome and Safari :D
    Good job!

  2. 2

    I’ve almost got Example 6 under the Other category (the scale up and fade out transition) working in Firefox 12. It fires once, but then it looks like the .te-hide on the .te-cover div and the te-show class on the te-transition class aren’t being removed, so my first image is still there. I modified the jquery.transitions.js a bit to change webkitAnimationStart to animationstart and webkitAnimationEnd to animationend (temporarily as this breaks Webkit browsers). Now, the first image scales up and disappears and I’ve got image #2 showing – and, .te-hide and .te-show are gone. Unfortunately, they return when I click the Next button.

    I’m so close! Any ideas how I can get it firing properly in Firefox?

    Thanks for the inspiring work!

  3. 3

    I just love to use jQuery and CSS3 based animation effects for web. However, CSS3 is not yet ready to take place of Flash and even not in the near future. Flash has its own charm which CSS3 can never provide us.

Comments are closed.