Hi,
so i’ve not used css animation before but i want to create a multistep animation. I’ve been looking at https://www.w3schools.com/css/css3_animations.asp and it shows the basic idea but i am not sure how to step to the next animation.
I want to be able to have 5 images that show in turn but each image will grow in size and then disappear quickly and then the next image appear and again grow. The it will end with nothing showing. Basically a countdown
I’m unsure what is the best way of doing that. Do i have 1 set of keyframes and use percentages to go from one part to the next OR do i create different keyframe sets that run 1 after the other (or timed to do so).
This is as far as i have got. But as above i am not sure this is the correct way to proceed. Any pointers would be useful. thanks
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
background-size: cover;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 6s;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: example 6s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: example 6s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
from {background-color: red; background-size:cover;background: transparent url('https://png.icons8.com/ios/540/black-cat-filled.png') center center no-repeat;}
to {background-color: yellow;background-size:200px;width:200px;height:200px;background: transparent url('https://png.icons8.com/ios/540/black-cat-filled.png') center center no-repeat;}
}
/* Standard syntax */
@keyframes example {
0% {background-color: red;background-size:cover;background: transparent url('https://png.icons8.com/ios/540/black-cat-filled.png') center center no-repeat;}
100% {background-color: yellow;background-size:200px;width:200px;height:200px;background: transparent url('https://png.icons8.com/ios/540/black-cat-filled.png') center center no-repeat;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Hi,
I was able to put together an example that does most of what you wanted.
It’s best to group as many styles together as you can and then just apply the changes through the progressions.
One problem I foresee with the BG images is that the browser only loads them as they are needed. My attempt to resolve that is to load them all on the parent as multiple bg images. Then add some extra time to the animation-delay, I set the delay at 4s so it takes four seconds before animation begins. This might work for fast connections but still might cause delays for people on slower connections.
It might be best to preload all the images with another method.
However this example should still work along with another preloading method. I’m just swapping out background sizes as they step through the animations.
I’m sure there are other ways to do it, but this should get you started.
I don’t have time to go into code at the moment. But conceptually this can be done with little math and management.
You said you wanted FIVE images working as a countdown.
This means you have 5 images.
you can set an animation on ALL 5 images.
then use the animation-delay property on EACH INDIVIDUAL IMAGE. Set the duration of the deal on each image as follows: (image # -1)* length of animation. This will ensure the animations “run” after the previous animations finish.
You probably want to make sure all animations end with the element being hidden.
Just curious… how would you keep the images from layering on top each other ‘with little math and management’ ?
I mean whether an element animates or not, and it has multiple bg images…those images must at least be positioned to manage the natural layering that happens.
Then in the case of a fixed size box that has them swapping out (trading positions) during the animation, there must be more to it than individual animation-delay.
A code example of the concept your explaining would be most helpful when time allows.
The image WOULD stack on each other. But only one would be visible at a time.
for this you could use display: none; ( or absolute positioning) to control the order of the stack.
I mean whether an element animates or not, and it has multiple bg images…those images must at least be positioned to manage the natural layering that happens.
that’s where my solution and yours differed. I didn’t have one shell with multiple BG. I was suggesting using multiple IMG tags within a container.
WOW. Thanks all that is much appreciated. I will have a look through what you’ve all suggested to get up to speed how what and how you have implemented each bit.
I’ll obviously need to do some testing across all devices but assuming that is all good i think that is exactly what i was looking to achieve.