I have been experimenting with keyframe animations and am looking to incorporate multiple images into the animation. Specifically, I want to switch out the image every 10% increment to depict someone running.
Despite my efforts to use a background-img in my demo, the image is not displaying at all. I searched for solutions but only came across outdated information from 2013 claiming it wasn't possible. However, I believe advancements may have been made in the past three years that could make this feasible.
If changing the image every 10% is not achievable, what alternative method would you suggest I explore?
Here is the code snippet I have been working on:
div {
width: 100px;
height: 100px;
background-image: url("http://optimumwebdesigns.com/images/brain.jpg");
position: relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
-webkit-animation-direction: normal; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 10s;
animation-iteration-count: 3;
animation-direction: normal;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:500px; top:0px;}
50% {background-color:blue; left:500px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:500px; top:0px;}
50% {background-color:blue; left:500px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}<div></div>