***SOLVED*** @keyframes Help please

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
User avatar
bburgess
 
 
Posts: 203
Joined: Mon May 13, 2013 5:05 am
Location: Australia
Contact:

***SOLVED*** @keyframes Help please

Post by bburgess » 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?

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
Last edited by bburgess on Mon Apr 10, 2017 1:27 am, edited 2 times in total.

pajadt
 
 
Posts: 328
Joined: Sat Mar 16, 2013 11:23 am
Location: Europe
Contact:

Re: @keyframes Help please

Post by pajadt » 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

User avatar
bburgess
 
 
Posts: 203
Joined: Mon May 13, 2013 5:05 am
Location: Australia
Contact:

Re: @keyframes Help please

Post by bburgess » Mon Apr 10, 2017 12:56 am

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
Last edited by bburgess on Mon Apr 10, 2017 1:41 am, edited 2 times in total.

User avatar
bburgess
 
 
Posts: 203
Joined: Mon May 13, 2013 5:05 am
Location: Australia
Contact:

Re: @keyframes Help please

Post by bburgess » Mon Apr 10, 2017 1:01 am

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.

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests