Callback for CSS animation effects

Using pure JS to achieve the animation effect code is large, computational complexity. So now the front-end page animation effect is generally implemented using CSS.

CSS animation is simple and efficient, but in the process of animation, control animation is missing some effective means.

For example, we want to call the callback function to handle some transactions when the animation effect is complete, and we will find that the CSS does not provide a direct way for us to use.

I. Introduction to CSS Animations

There are two kinds of CSS animation effects, transitions and animations.

1. Transition

When an element is transformed from one style to another, we animate the transition, which is called a transition.

CSS transitions are implemented through the Transtion property.

The Transtion property must contain the following two values:

• The name of the Style property to add the transition effect to
• Transition effect Duration

There are also two optional property values:

• Velocity time curve function of transition effect
• Delay Time for transition effect

Here is an example of a CSS transition effect:

   Div{      width: 100px;       Transition: width 2s;       -webkit-transtion:width 2s;    }     div.hover{      width: 300px;    }

When you move the mouse over this div, the div width increases by 200px.

We add a 2s transition effect to the width. The final effect is as follows:

 2. Animations

When you are implementing a more complex animation, you can use the animation property of CSS to define animation effects simply by using transitions.

To use the animation property, we must first look at the @keyframes rules that CSS3 joins.

@keyframes rules are used to create animations that can be defined from frames that animate the state of motion.

Here is an example of the @kayframes definition animation:

@keyframes Show {from    {color: red;} {color: yellow;}       /**/{from    {color: red;} {color: yellow;}      }

By @keyframes We can define the style changes from start to finish of the animation.

We can also define the animation style by defining the percentage state of the animation effect, as follows

@keyframes Show{0% {color:Red;}25%{Color:Yellow;}50%{Color:Blue;}100%{Color:Green;}}@-webkit-keyframes Show/*Safari and Chrome*/{0% {color:Red;}25%{Color:Yellow;}50%{Color:Blue;}100%{Color:Green;}}

After using @keyframes to define an animation effect, we can bind an animation effect to an element through animation, as follows:

Div:hover {   animation: Show 5s;}

The specific results are as follows:

Animated text

move the mouse over it you can see the animation effect

The above is a brief introduction of CSS animation, in addition CSS3 added the transform attribute, used for the 3D conversion, and is often used as an animation.

Two. callback function for CSS animations

Like the above CSS animation, if you want to use a callback function to control the animation after the completion of the transaction, it is more troublesome.

One. Delay function

Many people use the JS delay function settimtout() to solve the CSS animation callback problem, similar to the following code:

Settimtout (function() {     dosomething ()  // Animation callback function     }, delaytime);      // duration of animation

But this approach, because it's not really a callback, causes the following problems:

• Because animations and delay functions do not necessarily start at the same time, they cause the function and animation to be out of sync
• Will cause the JS code and CSS code interrelated coupling, modification and maintenance is more troublesome
• Confusing and bloated code when there are multiple animations that require callbacks
• Causes a callback function to conflict when multiple animation effects end at the same time

Therefore, it is not recommended to use the delay function as the callback function for animations.

Two. js Event

In fact, JS provides two events that can perfectly solve the problem of the callback function of the animation, that is transtionend and Animationend, when the animation is completed, the corresponding event will be triggered.

We can easily and elegantly add callback functions for animations with these two events.

The specific usage is as follows:

Transtionend

document.getElementById ("Mydiv"). AddEventListener ("Transitionend", myFunction); MyFunction is the animation callback function

Animationend

document.getElementById ("Mydiv"). AddEventListener ("Animationend", myFunction); MyFunction is the callback function

We use the following example to experience the specifics of these two events:

<style>div#test{width:100px;Height:100px;background:Red;transition:width 2s;-webkit-transition:width 2s; /*Safari*/}Div#test:hover{width:300px;}</style></Head><Body><DivID= "Test">&nbsp;</Div><Script>document.getElementById ("Test"). AddEventListener ("Transitionend", myFunction);functionmyFunction () { This. InnerHTML= "callback function to trigger div to become pink";  This. Style.backgroundcolor= "Pink";}</Script>

Because I do not have the JS permissions of the blog, so can not be added here to demonstrate the effect of the copy to the file to open, you can see the effect of the animation callback function.

The above is about the CSS animation callback function of some knowledge, I hope to help you.

Callback for CSS animation effects