How To Rotate A Background Image In Css Forever

Commonly used as office of image galleries, or to show particular on products. This has traditionally been done in javascript by iterating over the opacity - using CSS transitions makes this very easy to add to your site.

Demo i - One paradigm to some other, on hover

Program

Put one epitome on top of the other
Alter the opacity of the acme image on hover

Demo

Code

Kickoff up, the HTML markup. Without CSS enabled, you but get two images. Recall to add alt text for production use.

<div id="cf">   <img class="bottom" src="/images/Windows%20Logo.jpg" />   <img class="pinnacle" 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.top:hover {   opacity:0; }

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

Plan

Aforementioned as before, but instead of using the :hover pseudo class, we are going to use javascript to add a toggle a class. I'1000 using jQuery hither because it's easy to empathise, though y'all could just utilize plain old JS.

Demo

Click me to toggle

Code

Start upward, the HTML markup. Again, with no CSS enabled, you only get ii images.

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

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

#cf2 {   position:relative;   peak: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; }

Then the extremely brusk JS. Note that the browser is smart enough to realise that it can animate to the new backdrop, I didn't have to gear up them in javascript (thought that works too).

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

Have a look at the multiple image demo to see how to extend this idea to more than two images.

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

Program

You could implement this by using Javascript to toggle classes with a filibuster - that would let older browsers to still accept the images change. As we are looking forward though, we'll employ CSS keyframes.

Commencement with ii images absolutely positioned on superlative of each other.
Use CSS keyframes to define two states, one with peak image transparent, one with it opaque.
Prepare the animations number of iterations to infinite.

Demo

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

Code

Everything's the same as Demo ane, just 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; blitheness-timing-role: ease-in-out; animation-iteration-count: infinite; animation-elapsing: 10s; blitheness-management: alternate; }

To make sense of that, I've defined 4 keyframes, specified that whatever has this animation attached will exist opaque for the first 45%, so transparent for the last 45%. The animation will echo forever, will concluding 10 seconds, and will run forrad and then backwards. In other words, image 1 volition be visible for 4.5 seconds, followed by a one second fade, followed by 4.v seconds of paradigm 2 being visible. And so information technology will reverse, pregnant that image 1 and ii will both be visible for 9 (4.5 10 2) seconds each time.

Demo with multiple images

Staggering the animations tin result in a multiple epitome fader.

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

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

For "northward" images You must define:
a=presentation time for ane paradigm
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n

blitheness-filibuster = t/northward 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:1;   }   25% {     opacity:0;   }   92% {     opacity:0;   }   100% {     opacity:i;   } }  #cf4a img:nth-of-type(one) {   blitheness-delay: 6s; } #cf4a img:nth-of-type(2) {   animation-delay: 4s; } #cf4a img:nth-of-type(iii) {   animation-delay: 2s; } #cf4a img:nth-of-type(4) {   animation-delay: 0; }

Demo 4 - More only fades

This technique isn't limited to but fades, yous tin can animate nigh every holding. Here are a couple of examples.

Zooming in and out

Hover on the image

Rotation

Hover on the image

Demo 5 - Animating the background-image property

Right at present this only works on webkits congenital from 2012 onwards. It'southward not part of the spec (yet?).

Plan

Make a div with a width and superlative
Change the background-image belongings

Demo

Code

This merely works on Chrome eighteen+ and on Webkit built in 2012 onwards, including iOS6. Information technology seems to be a side outcome of the CSS4 crossfading work, though this is a lot more useful.

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

Then the CSS:

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

Pretty cool - this can easily be extended by simply changing the background-epitome property with JS, and makes things much much simpler. I'm not sure if this behaviour is part of the spec or not, and I oasis't seen support anywhere other than in the afore mentioned browsers.

For a slightly more detailed example, have a wait at a simple gallery using filters and fades.

Demo 6 -Fading between multiple images on click

Image 1 Image two Image 3 Epitome iv

This is very like to the others – just layout the images on top of each other, set them all to be transparent, then when the controls are clicked change that one to opaque.

For this example:

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 class="selected">Image one</span>   <span>Epitome 2</span>   <span>Image iii</span>   <bridge>Prototype 4</bridge> </p>

CSS

p#cf7_controls {   text-align:heart; } #cf7_controls span {   padding-right:2em;   cursor:arrow; } #cf7 {   position:relative;   top:281px;   width:450px;   margin:0 auto 10px; } #cf7 img {   position:accented;   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: blastoff(opacity=0); }  #cf7 img.opaque {   opacity:1;   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";   filter: blastoff(opacity=i); }

JS

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