add animation to javascript using css

Question

I am using the below code to add animation to the slideshow using css. But the animation is applied only to the first image and not to other images. how do I add the transition to other images as well using css only?

<html>
    <style>
        #slideshow{width:310;height:210;border-style:solid;}
        #imge{
            position:absolute;left:15;top:15;
            animation:myfirst 3s;}
        @keyframes myfirst
        {
            from {width:0;}
        to {width:300;}
        }

        @-webkit-keyframes myfirst /* Safari and Chrome */
        {
            from {width:0;}
        to {width:300;}
        }

    </style>
    <body>
        <div id="slideshow">
            <img id="imge" src="img1.jpg" height="200" width="300">
        </div>
        <script>
            var count=1;
            mf();
            function mf()
            {
                document.getElementById("imge").src="img"+count+".jpg";

                if(count<3)
                    count++;
                else
                    count=1;
                setTimeout("mf()",3000);
            }

        </script>
    </body>
</html>

Manoj · Accepted Answer · 2014-01-09 05:38:22Z

1

Use CSS3 animation property animation-iteration-count

Specifies the number of times an animation is played. Default 1,so make it to infinite

Try this code:

Fiddle:

#slideshow{width:310px;height:210px;border-style:solid;}
#imge{
position:absolute;left:15;top:15;
width:310px;height:210px;
animation:myfirst 3s;
animation-iteration-count:infinite;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-webkit-animation-iteration-count:infinite;}

@keyframes myfirst
{
from {width:0px;}
to {width:300px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {width:0px;}
to {width:300px;}
}

JS:

var count=1;
mf();
function mf()
{
document.getElementById("imge").src="img"+count+".jpg";

if(count<3)
count++;
else
count=1;
setTimeout("mf()",3000);
}

edited Jan 9, 2014 at 5:38

answered Jan 9, 2014 at 5:28

Manoj

1,8881 gold badge13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manoj Over a year ago

for image gallery infinite loop, u can use infinite,or else can specify the count no...

aelor · Accepted Answer · 2014-01-09 05:39:16Z

1

What you want is called animation-iteration-count property of css. You can check it out here

By setting the number you can fix the number of times the image has to show certain animation. In your case you can set it to 3 as you have 3 images. You can also loop it infinitely using the count as infinite

answered Jan 9, 2014 at 5:39

aelor

11.2k3 gold badges35 silver badges48 bronze badges

Comments

Edgar Villegas Alvarado · Accepted Answer · 2014-01-09 05:27:32Z

0

Switch from ids to classes:

Instead of this:

    <div id="slideshow">
        <img id="imge" src="img1.jpg" height="200" width="300">
    </div>

    #slideshow{...}
    #imge{...}

to this:

    .slideshow{...}
    .imge{...}

The reason is that ids are unique (you can have only one), but classes not.

Hope this helps. Cheers

answered Jan 9, 2014 at 5:27

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

Comments

kiro · Accepted Answer · 2014-01-09 05:34:28Z

0

<img id="imge" src="img1.jpg" height="200" width="300">

change to

<img class="imge" id="imge1" src="img1.jpg" height="200" width="300" style="display:none;"/>
<img class="imge" id="imge2" src="img2.jpg" height="200" width="300" style="display:none;"/>
<img class="imge" id="imge3" src="img3.jpg" height="200" width="300" style="display:none;"/>

so css #imge should be .imge

javascript

function mf()
{
  for(var i=1;i<4;i++)
  {
     document.getElementById("imge"+i).style.display="none";
  }  

  document.getElementById("imge"+count).style.display="block";

 if(count<3)
  count++;
 else
  count=1;
 setTimeout("mf()",3000);

}

when making the imge show,the animation will be triggered

edited Jan 9, 2014 at 5:34

answered Jan 9, 2014 at 5:26

kiro

1111 silver badge4 bronze badges

1 Comment

user2828552 Over a year ago

not working this way...1st iamge displayed with transition but rest not

Collectives™ on Stack Overflow

add animation to javascript using css

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related