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>
4 answers
solution1
1 ACCPTED 2014-01-09 05:28:56
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);
}
solution2
1 2014-01-09 05:39:16
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
solution3
0 2014-01-09 05:26:58
<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
solution4
0 2014-01-09 05:27:32
Switch from id s to class es:
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 id s are unique (you can have only one), but classes not.
Hope this helps. Cheers
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.