Page 1 of 1

***SOLVED*** @keyframes Help please

Posted: Sun Apr 09, 2017 12:03 am
by 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

Re: @keyframes Help please

Posted: Sun Apr 09, 2017 11:52 am
by 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

Re: @keyframes Help please

Posted: Mon Apr 10, 2017 12:56 am
by bburgess
pajadt wrote: Sun Apr 09, 2017 11:52 am 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

Re: @keyframes Help please

Posted: Mon Apr 10, 2017 1:01 am
by bburgess
pajadt wrote: Sun Apr 09, 2017 11:52 am 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.