***SOLVED*** @keyframes Help please

[bburgess]

Hi Guys

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>

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

[pajadt]

For detail feedback need project to see what you do;
Anyway
- style goes between head tags
- if use animation from WWB in Itertion count must be 1

[bburgess]

For detail feedback need project to see what you do;
Anyway
- style goes between head tags
- if use animation from WWB in Itertion count must be 1

Hi mate

All the detail is in the code, it is simply in a html obj from the tool box.

This is the effect here, see it a lot on sites URL Removed

But I want it to stop after one ease in and one ease out.

Cheers
BB

[bburgess]

For detail feedback need project to see what you do;
Anyway
- style goes between head tags
- if use animation from WWB in Itertion count must be 1

Sorry mate just had a thought! Are you saying I can ease the background image of a floating layer in WB using CSS animations?

Cheers

EDIT: Ok I just tried Fade in fusing CSS Ani in WB and that's working but Animate Background is not! I must be doing something wrong, off to play LOL

Cheers

Edit: So I have it going using transforms

Cheers will keep playing with it.