Jump to content

Web Animations API-How To Control The Keyframes Percentage?


Eyad Syria-lover

Recommended Posts

Hello People.

I'am Using Web Animations API To Create Animations On My Web Page,This API Has A Similar Syntax To This:

 

element.animate([

{css_property:value},

{css_property_2:value_2},

{css_property_3:value_3} //And So On..

],{

duration:value, //In Milliseconds

iterations:value, //An Integer

easing:value //linear,ease-in,ease-out,cubic-bezier,etc...

});

 

So I Was Wondering About How To Use These Keyframes In Such A Way That;

 

/* In CSS */

@keyframes test

{

0% {property_1:value_1}

20% {property_2:value_2}

100% {property_3:value_3}

}

/* If You Know What I Mean About Percentage */

 

How Can I Make Web Animations API Run The First Keyframe At 0% And The Second At 20% And The Third At 100%?

 

Thanks For Your Patience...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...