How To Rotate A Background Image In Css Forever

Usually used every bit function of image galleries, or to show detail on products. This has traditionally been done in javascript by iterating over the opacity - using CSS transitions makes this very like shooting fish in a barrel to add to your site.

Demo i - One paradigm to another, on hover

Plan

Put ane epitome on meridian of the other
Modify the opacity of the acme image on hover

Demo

Code

First upwards, the HTML markup. Without CSS enabled, yous just get two images. Recall to add together alt text for product use.

<div id="cf">   <img grade="bottom" src="/images/Windows%20Logo.jpg" />   <img form="peak" src="/images/Turtle.jpg" /> </div>

Then the CSS:

#cf {   position:relative;   height:281px;   width:450px;   margin:0 auto; }  #cf img {   position:absolute;   left:0;   -webkit-transition: opacity 1s ease-in-out;   -moz-transition: opacity 1s ease-in-out;   -o-transition: opacity 1s ease-in-out;   transition: opacity 1s ease-in-out; }  #cf img.meridian:hover {   opacity:0; }

Demo 2 - One image to another, when a button is pressed (transitions)

Plan

Same as before, just instead of using the :hover pseudo class, we are going to utilize javascript to add a toggle a class. I'1000 using jQuery hither considering it's easy to understand, though you could merely utilize plain sometime JS.

Demo

Click me to toggle

Code

First up, the HTML markup. Again, with no CSS enabled, yous only become 2 images.

<div id="cf2" class="shadow">   <img class="bottom" src="/images/Windows%20Logo.jpg" />   <img class="top" src="/images/Turtle.jpg" /> </div> <p id="cf_onclick">Click me to toggle</p>

Then the CSS. I've added a class with the opacity value.

#cf2 {   position:relative;   tiptop:281px;   width:450px;   margin:0 auto; } #cf2 img {   position:absolute;   left:0;   -webkit-transition: opacity 1s ease-in-out;   -moz-transition: opacity 1s ease-in-out;   -o-transition: opacity 1s ease-in-out;   transition: opacity 1s ease-in-out; }  #cf2 img.transparent { opacity:0; } #cf_onclick { cursor:pointer; }

And then the extremely short JS. Notation that the browser is smart plenty to realise that it tin can breathing to the new properties, I didn't have to prepare them in javascript (thought that works too).

$(document).ready(role() {   $("#cf_onclick").click(function() {   $("#cf2 img.top").toggleClass("transparent"); }); });

Take a expect at the multiple image demo to come across how to extend this idea to more two images.

Demo 3 - One image to another with a timer (CSS animations)

Plan

You could implement this by using Javascript to toggle classes with a delay - that would allow older browsers to even so have the images modify. Every bit we are looking forward though, we'll employ CSS keyframes.

Start with two images admittedly positioned on top of each other.
Utilise CSS keyframes to define two states, one with pinnacle image transparent, one with it opaque.
Set the animations number of iterations to infinite.

Demo

Each image is visible for 9 seconds before fading to the other one.

Code

Everything'due south the aforementioned as Demo 1, simply I've added this to the CSS and removed the hover selector

            @keyframes cf3FadeInOut {   0% {   opacity:one; } 45% { opacity:one; } 55% { opacity:0; } 100% { opacity:0; } }  #cf3 img.top { animation-name: cf3FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 10s; animation-direction: alternating; }

To make sense of that, I've defined 4 keyframes, specified that whatever has this animation fastened will be opaque for the showtime 45%, then transparent for the last 45%. The animation will repeat forever, will last 10 seconds, and will run forward and so backwards. In other words, prototype 1 volition exist visible for 4.5 seconds, followed by a i second fade, followed by four.5 seconds of image 2 beingness visible. Then it will reverse, meaning that image 1 and 2 will both be visible for 9 (iv.5 x 2) seconds each time.

Demo with multiple images

Staggering the animations can issue in a multiple paradigm fader.

This time I've created an animation that goes from 0 to ane opacity, and then staggered the animations so only one is visible at in one case.

Thanks to Pafson'south annotate, this is finally working as expected! He proposes the following algorithm to determine the percentages and timings:

For "n" images Yous must define:
a=presentation fourth dimension for i prototype
b=elapsing for cross fading
Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

0%
a/t*100%
(a+b)/t*100% = one/northward*100%
100%-(b/t*100%)
100%

@keyframes cf4FadeInOut {   0% {     opacity:1;   }   17% {     opacity:ane;   }   25% {     opacity:0;   }   92% {     opacity:0;   }   100% {     opacity:i;   } }  #cf4a img:nth-of-type(ane) {   blitheness-delay: 6s; } #cf4a img:nth-of-type(2) {   animation-delay: 4s; } #cf4a img:nth-of-type(iii) {   blitheness-delay: 2s; } #cf4a img:nth-of-type(4) {   animation-filibuster: 0; }

Demo 4 - More than simply fades

This technique isn't limited to just fades, you tin animate almost every belongings. Hither are a couple of examples.

Zooming in and out

Hover on the epitome

Rotation

Hover on the epitome

Demo v - Animative the background-image holding

Correct at present this but works on webkits built from 2012 onwards. It'due south not part of the spec (yet?).

Plan

Make a div with a width and acme
Change the background-image holding

Demo

Lawmaking

This only works on Chrome 18+ and on Webkit congenital in 2012 onwards, including iOS6. It seems to exist a side result of the CSS4 crossfading work, though this is a lot more useful.

<div id="cf6_image" grade="shadow"></div>

Then the CSS:

#cf6_image {   margin:0 car;   width:450px;   elevation:281px;   transition: groundwork-image 1s ease-in-out;   background-paradigm:url("/images/Windows%20Logo.jpg"); }  #cf6_image:hover {   groundwork-image:url("/images/Turtle.jpg"); }

Pretty cool - this can hands be extended by simply irresolute the background-image property with JS, and makes things much much simpler. I'thousand not sure if this behaviour is part of the spec or not, and I oasis't seen back up anywhere other than in the afore mentioned browsers.

For a slightly more detailed example, accept a await at a simple gallery using filters and fades.

Demo 6 -Fading between multiple images on click

Paradigm i Image 2 Image 3 Image 4

This is very similar to the others – simply layout the images on height of each other, ready them all to exist transparent, and so when the controls are clicked change that 1 to opaque.

For this instance:

HTML

<div id="cf7" class="shadow">   <img class='opaque' src="/images/Windows%20Logo.jpg" />   <img src="/images/Turtle.jpg;" />   <img src="/images/Rainbow%20Worm.jpg;" />   <img src="/images/Birdman.jpg;" /> </div> <p id="cf7_controls">   <bridge course="selected">Epitome 1</span>   <span>Image two</bridge>   <span>Image 3</span>   <bridge>Image 4</span> </p>

CSS

p#cf7_controls {   text-align:center; } #cf7_controls span {   padding-right:2em;   cursor:pointer; } #cf7 {   position:relative;   height:281px;   width:450px;   margin:0 automobile 10px; } #cf7 img {   position:absolute;   left:0;   -webkit-transition: opacity 1s ease-in-out;   -moz-transition: opacity 1s ease-in-out;   -o-transition: opacity 1s ease-in-out;   transition: opacity 1s ease-in-out;   opacity:0;   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";   filter: alpha(opacity=0); }  #cf7 img.opaque {   opacity:1;   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";   filter: blastoff(opacity=ane); }

JS

$(document).ready(part() {   $("#cf7_controls").on('click', 'span', part() {     $("#cf7 img").removeClass("opaque");      var newImage = $(this).alphabetize();      $("#cf7 img").eq(newImage).addClass("opaque");      $("#cf7_controls span").removeClass("selected");     $(this).addClass("selected");   }); });