By
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.
