CSS @keyframes Help please - Post ID...

User 2744602 Photo


Registered User
162 posts

Hi Guys :)

Anybody know where I place iteration count or how to stop the animation after one loop?


<style>
#top {

-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;

-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>

The code works a treat but as you can see its set for "infinite" and simply removing it gives a nast back to original jolt, I would like it to do one complete in and out then simply stop.
Any help would be great tx!
Cheers
KISS is the key!
Burgess Freelance Solutions
User 122279 Photo


Senior Advisor
11,414 posts

Instead of infinite, try a number.
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RFF, RBB, RSD and SD: http://www.horgenhonning.net/sharing/


User 2744602 Photo


Registered User
162 posts

Inger wrote:
Instead of infinite, try a number.


Hi Inger :)

You mean: animation: bground 8s ease-in-out 1 alternate;

Okies will give it a go and report back
Cheers!
KISS is the key!
Burgess Freelance Solutions
User 2744602 Photo


Registered User
162 posts

Well I tried 1 and One but no go.
Cheers!
KISS is the key!
Burgess Freelance Solutions
User 122279 Photo


Senior Advisor
11,414 posts

I don't know what your animation is like, but here it works:
http://codepen.io/team/css-tricks/pen/EjaJNd
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: http://www.horgenhonning.net/
Component sharing for RFF, RBB, RSD and SD: http://www.horgenhonning.net/sharing/


User 2744602 Photo


Registered User
162 posts

Inger wrote:
I don't know what your animation is like, but here it works:
http://codepen.io/team/css-tricks/pen/EjaJNd


Simular to that except that the whole background image eases in and eases out, but with "infinite" it will just keep easing :D

I want it to ease in once and out once then stop. Been looking all over but nothing I try will stop or even pause the animation after it has eased in and out again.

This should be easy but its being a pain :D
KISS is the key!
Burgess Freelance Solutions

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.