***SOLVED*** @keyframes Help please
Posted: Sun Apr 09, 2017 12:03 am
Hi Guys
Need help from the CSS gurus. Anybody know where I place iteration count or how to stop the animation after one loop?
The code works a treat but as you can see its set for "infinite" and simply removing it gives a nasty back to original jolt, I would like it to do one complete in and out then simply stop.
Or better still a fade out on the last second and a fade in back to the original size.
Any help would be great tx!
Cheers
BB
Need help from the CSS gurus. Anybody know where I place iteration count or how to stop the animation after one loop?
Code: Select all
<style>
#top {
-webkit-animation: bground 8s ease-in-out infinite alternate;
animation: bground 8s ease-in-out infinite alternate;
}
@-webkit-keyframes bground {
0% {
-webkit-transform: scale(1.0);
}
100% {
-webkit-transform: scale(1.1);
}
}
@keyframes bground {
0% {
transform: scale(1.0);
}
100% {
transform: scale(1.1);
}
}
</style>
Or better still a fade out on the last second and a fade in back to the original size.
Any help would be great tx!
Cheers
BB