Front-end actuation via CSS Animation

This article mainly introduced about through the CSS animation for the front-end dynamic, has a certain reference value, now share to everyone, the need for friends can refer to

Objective

For simple tweened animations, we can do this by transition implementing the. So how simple is the animation suitable for use transtion to achieve it? The answer is--we only need to animate the state of the start and end frames of the animation. Once the number of keyframes is greater than 2 o'clock, we have to turn to CSS animation. This article for this period of time to learn the record, welcome to shoot bricks.

Simple rough Introduction to CSS Animation rules and properties

Defining Keyframe Animations

Grammar:

@keyframes <animation name> {  [<animation time offset> {/    * CSS Properties */  }]*}

Example:

@keyframes Rotate {from  {transform:rotate (0deg);}  to {transform:rotate (360deg);}}

Note Item:
1. <Animation Name> Naming conventions

Naming needs to follow the following rules const RISINVALID =/^--|^[0-9]+-|^ (?: Unset|initial|inherit|none) $/    , risvalid =/^[0-9a-z-_\\]+$/ Ifunction Isvalidanimationname (animationname:string): boolean{  return!risinvalid.test (animationname) & & Risvalid (Animationname)}

2. <Animation Time Offset> take the value
0-100%, from equivalence and, 0% to equivalence and 100% .
3. <Animation Name> What to repeat
@keyframes CSS rules do not support cascading styles, so when multiple keyframes with the same name appear, only the last one that appears is valid.

/* Invalid */@keyframes rotate {from  {transform:rotate (0deg);}  to {transform:rotate (360deg);}} /* Effective */@keyframes rotate {from  {transform:rotate (90deg);}  to {transform:rotate ( -360deg);}}

4. <Animation Time Offset> What to repeat
As with @keyframes CSS rules, the standard specifies that the same keyframe does not produce a cascade, and that only the last occurrence is considered valid.
But in fact firefox14+ and Chrome both have keyframes designed to cascade.

@keyframes Rotate {from  {transform:rotate (0deg);}  from {background:red;}  /* The above two time offset is actually equivalent to   * from {transform:rotate (0deg); background:red;}   *  /to {    transform:rotate (360deg);    Background:yellow;}  }

5. !important cause attribute Invalidation
!importantin general, the CSS property gets the highest weight, but under @keyframes it causes the CSS property to fail.

@keyframes Rotate {from  {    transform:rotate (90deg);    Background:red!important; /* Background Property Invalid  *  /} to {transform:rotate ( -360deg);}}

6. Must provide at least two keyframes

/* does not animate according to the easing function, but moves past the last instant of the animation's duration */@keyframes move-left{to   {       left:100px;   }}

Using animations

<css-selector> {  Animation: <animation-name>             <animation-duration>             < animation-timing-function>             <animation-delay>             <animation-iteration-count>             < animation-direction>             <animation-fill-mode>             <animation-play-state>;}

Example:

. box.rotate {  animation:rotate 10s infinite Alternate;}

Child Properties Introduction

<animation-name> , specifying the name of the tweened animation defined by @keyframes.
<animation-duration> , the duration of the animation, the default is 0s. Units are S and Ms.
<animation-delay> , animation playback delay, default is 0s. Units are S and Ms.
<animation-iteration-count> , the animation repeats the number of times, the default is 1,infinite represents an infinite loop. The total duration of the animation is <animation-duration>*<animation-iteration-count> .
<animation-direction> , optional value Normal | reverse | alternate | Alternate-reverse , Indicates that the animation plays in the order of from through to , the from-to-from , and from-to-to-to-from and from-to-to-to . Note: When setting alternate|alternate-reverse, Animation-iteration-count must be greater than 1 to see the effect
<animation-fill-mode> , optional value none | forwards | backwards | Both to set whether to apply before and after the animation starts The 0 and 100% styles are on the element. Indicates do not apply , apply 100% style , apply 0% style and 0% and 100% styles apply during deferred playback.
Note:

1. By default (none), the style before the animation is restored after the animation is finished;

2. When you set backwards, the,<animation-delay> value is greater than 0 to see the effect.

<animation-play-state>, an optional value running | paused that gets and sets the playback status. Note: With this property, we can only pause and resume the effect of playback, not to achieve replay, let alone play back
<animation-timing-function>To set the easing function type with a value of ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps(<integer>, <flag>) | frames(<integer>) | cubic-bezier(<number>,<number>,<number>,<number>) .
ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier(<number>,<number>,<number>,<number>)the effects are all continuous gradients, and then the step-start | step-end | steps(<integer>, <flag>) | frames(<integer>) mutation effect. Let's dive into the latter.

Easing function- step troubleshoot special topic

 step-startis actually equivalent to steps(10, start) , and step-end is equivalent to steps(10) , so we just need to understand well steps(<integer>, <flag>) .

/* Achieve abrupt changes by setting the average number of refresh frames within an animation period (<animation-duration>). Specific applications are: Game Wizard walking, typing effect, etc. * <number_of_steps>-number of refreshes between two keyframes * <direction>-direction, optional value is End | Start * End is the default value, which indicates the end of the animation and the end of the animation               ; *               start indicates the effect of the first keyframe is executed immediately after the animation starts. */steps (<NUMBER_OF_STEPS>, <direction>)

From Zhang Xuxin that stole the explanation:
Start: Indicates a direct start. That is, time begins, and a distance segment has been executed. Thus, the 5 segment points that the animation executes are the following 5, and the starting point is ignored because the time begins directly at the second point:
End: Indicates a sudden halt. That is, when the time is over, the current distance shift stops. So, the 5 segments that the animation executes are the following 5, the end point is ignored, because there is no time to execute the end point:

In addition <animation-fill-mode> forwards , when <direciton> set to end, the style of the last keyframe of the animation is also displayed (persisted).

Event

Const TARGET = document.getElementById ("target") Target.addeventlistener ("Animationstart", E + = {  //trigger at start of animation}) Target.addeventlistener ("Animationiteration", E + = {  ////When the animation is repeated every time/  /when <animation-iteration-count > is 1 o'clock and will not be triggered. }) Target.addeventlistener ("Animationend", E + = {  //When the animation ends)

Do brains to achieve replay effect

Here we can already @keyframes define and apply CSS animation, but can we get more control over the animation effect? such as start, pause, resume, replay. It <animation-play-state> 's easy to start, pause, and continue, but replay is not that simple.

function Pause (target:htmlelement): boolean {  const isrunning = Target.style.animationPlayState = = "Running"  if (isrunning) {    target.style.animationPlayState = "Paused"  }    return isrunning}function play (target: HtmlElement): boolean {  const ISSTOP = Target.style.animationPlayState = = "Paused"  if (isstop) {    Target.style.animationPlayState = "Running"  }    return isstop}function replay (target:htmlelement, animationclassname:string): void {  //First remove animation effect  Target.classList.remove (animationname)  // Requestanimationframe's callback function executes the requestanimationframe before the next interface render  (_ + =    //This is the effect of the animation, so wait until the interface finishes rendering and then re-enable the animation effect. To implement Replay    Requestanimationframe (_ + = {      Target.classList.add (Animationname)})}  )}

Summarize

CSS3 gives us an animated effect, in addition to providing richer controllability than transition, a simpler API than JavaScript, and allowing us to use the GPU to accelerate ^_^

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!