News

Use CSS3 to animate image states

Discover how to implement flashing states between a series of images with CSS3 animations instead JavaScript

CSS3SCreen

Create image set

Images flashing between several states adds instant life to flat-looking pages, using only some simple CSS3 animation to achieve the effect. We start with a set of images of identical dimensions to suit your design, but with image file sizes not too excessive. Five images needn’t be five times the weight – and remember, in animation, image-crushed imperfections aren’t as noticeable.

Mark up multiple images

The HTML markup is simple but the use of classes is important for attaching the corresponding CSS styles. In this example we’ll use five image elements placed within a <div> but it can be however many you like. Two flashing images tell a different kind of story, so it’s a powerful tool for multiple communications; varying it up will create a different type of impact.

001    <div class=”carousel-five-images”>
002        <img class=”one” src=”image-1.
jpg”/>
003        <img class=”two changing” 
src=”image-2.jpg”/>
004        <img class=”three changing” 
src=”image-3.jpg”/>
005        <img class=”four changing” 
src=”image-4.jpg”/>
006        <img class=”five changing” 
src=”image-5.jpg”/>
007    </div>

Main CSS classes

Next we have the writing of the core CSS of the elements. Here we set the basic positioning and starter styles for our container <div> and <img> elements before adding the named classes for binding the animation to each image. CSS3’s animation property sets a duration value in seconds, the iteration as ‘infinite’ for looped, the direction ‘forwards’ and with a ‘linear’ speed curve.

001    .carousel-five-images{
002        position: relative; //can be 
anything, but must be defined.
003    }
004    .carousel-five-images .changing {
005        position:absolute;
006        opacity:0;
007        top:0;
008        left:0;
009    }
010    .carousel-five-images .two{
011        animation:animate-five-two 4s 
infinite forwards linear;
012    }
013    .carousel-five-images .three{
014        animation:animate-five-three 4s 
infinite forwards linear;
015    }
016    .carousel-five-images .four{
017        animation:animate-five-four 4s 
infinite forwards linear;
018    }
019    .carousel-five-images .five{
020        animation:animate-five-five 4s 
infinite forwards linear;
021    }
022    

Define the CSS animation

Next up it’s all about defining the actual animations for fading the images in and out at the correct times. Here we use the CSS3 @keyframes rule, using the various percentages of the animation duration to toggle image opacity between invisible and visible. You could go on to add additional style shifts, listing desired properties and attributes separated by semi-colons but we’ll keep it simple here.

001    @keyframes animate-five-two
002    {
003        0%    {opacity:0;}
004        15% {opacity:0;}
005        20% {opacity:1;}
006        90% {opacity:1;}
007        95% {opacity:0;}
008    }
009    @keyframes animate-five-three
010    {
011        0% {opacity:0;}
012        35% {opacity:0;}
013        40% {opacity:1;}
014        90% {opacity:1;}
015        95% {opacity:0;}
016    }
017    @keyframes animate-five-four
018    {
019        0% {opacity:0;}
020        55% {opacity:0;}
021        60% {opacity:1;}
022        90% {opacity:1;}
023        95% {opacity:0;}
024    }
025    @keyframes animate-five-five
026    {
027        0% {opacity:0;}
028        75% {opacity:0;}
029        80% {opacity:1;}
030        95% {opacity:1;}
031        100% {opacity:0;}
032    }

Tweak the timing

At this point the images should be fading between the five states. Tweaking the speed for the purpose is a quick way of massively affecting the vibe the flashing images give off. If you’re going for an ultra silky, classic look, go for a period of maybe seven seconds (7s), for something that looks engaging and spicy, amp it right up with a time around two seconds (2s).

More or less images

The final thing is to copy the same code and produce the same effect for an image set of two, three or four images depending on your need. The crucial part here is looking at the animation @keyframe time, so for five images we use a 5 per cent fade-in time, 15 per cent of being on, then 5 per cent going off. For two images, the ‘on’ time period is more like 40-45 per cent.

×