Several ways to animate the front end (CSS3,JS)

The production of Dynamic Web pages is the front-end engineers must have the skills, very good implementation of animation can greatly improve the user experience, enhance the interactive effect, then the animation has how many ways to achieve, has been the choice of fear of the disease I summed up, in order to choose the best way to achieve in the development.

1.css of transition.

Grammar:

 Property Duration timing-function delay;

Property: Fill in the required changes of CSS properties such as: Width,line-height,font-size,color, etc.;

Duration: The time required to complete the transition (2s or 2000ms)

Timing-function: Speed curve to finish effect (linear,ease,ease-in,ease-out, etc.)

value	Description
Linear	Constant speed (equal to Cubic-bezier (0,0,1,1)).
Ease	From slow to fast to slow (Cubic-bezier (0.25,0.1,0.25,1)).
Ease-in	Slowly becomes faster (equals Cubic-bezier (0.42,0,1,1)).
Ease-out	Slowly slows (equals Cubic-bezier (0,0,0.58,1)).
Ease-in-out	Go faster and slower (equal to Cubic-bezier (0.42,0,0.58,1)). Fade Fade effect
Cubic-bezier (n,n,n,n)	Define your own values in the Cubic-bezier function. The possible values are numbers between 0 and 1.

Timing-delay: The delay trigger time of the animation effect (2s or 2000ms).

The default values are: all 0 ease 0  

The transition captures the starting and completion states of the set of changed properties and completes the animation by setting the speed curve. Can involve a variety of CSS properties, the default is all, then all the changed properties will be animated at the start of the presentation.

This animation is CSS3, so IE9 the following is not supported, other browsers need to prefix, and only two states, does not support the custom intermediate state.

Example:

<style type= "Text/css" > Div{width:100px;height:100px;background:red;transition:width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */} div:hover{width:300px;} </style><div></div>

　　

Tips:transform is a change attribute that allows us to rotate, scale, move, or skew an element. can act as a property that needs to be changed in transition.

Prefix:

Transform:rotate (9DEG);
-ms-transform:rotate (9DEG); /* Internet Explorer */
-moz-transform:rotate (9DEG); /* Firefox */
-webkit-transform:rotate (9DEG); /* Safari and Chrome */
-o-transform:rotate (9DEG); /* Opera */　　

The animation property of 2.CSS3

Grammar:

 Animation:  name   duration   timing-function   delay   iteration-count   direction ; The name of the 
 
 Name:keyframe, which is the name of the animation that defines the keyframe, which is used to distinguish between different animations. 
 Duration: The time required to complete the animation (2s or 2000ms) 
 Timing-function: Speed curve for complete animation 
 Delay: Delay before animation starts 
  Iteration-count: Number of animation plays 
 direction: whether to rotate the animation in reverse (normal: Play normally, alternate next) If you set the animation to play only once, the property has no effect. 
  
  animating with the animation property gives you more flexibility in animating frames, with different keyframe (animated frames) set up to achieve many elegant effects, The percentage in Keyframe is the percentage of total time the animation is completed. The 
  animation is to set the overall animation effect, while the corresponding animation name is set in Keyframe, and then the specific animation effect is set in Keyframe. Of course, because it is a CSS3 attribute, you still need to be aware of its compatibility, plus the necessary prefixes.  
 
  Example:  

<style> div{    width:100px;    height:100px;    background:red;    position:relative;    Animation:mymove 5s Infinite;    -webkit-animation:mymove 5s Infinite; /*safari and chrome*/} @keyframes mymove{    1% {left:0px;}    20%{left:200px;}    50% {left:300px;}    100%{left:200px;}} @-webkit-keyframes mymove/*safari and chrome*/{    1% {left:0px;}    20%{left:200px;}    50% {left:300px;}    100%{left:200px;}} </style><div></div>

Animate functions in 3.Jquery

Grammar:

$ (selector). Animate (styles,options)

Styles: CSS styles and values that produce animations;
options={
   Speed: Velocity of animation (optional parameter: slow,normal,fase)
   Easing: Animation's speed function (optional parameter: swing,linear)
   Callback: The function to be executed after the animation is completed;
   Queue: Whether it is placed in the effect queue, is a Boolean value, and false starts immediately
   One or more attribute mappings for the Specialeasing:styles parameter and the corresponding easing function. }

$ (myelement). Animate ({       left:500,       top:200}, {
Duration: ' n ',       specialeasing: {left            : ' Swing ',            top: ' Linear '        }};

This method changes the element from one state to another through CSS styles. CSS property values are changed gradually so that you can create animation effects.

Only numeric values can create animations (such as "margin:30px"). String values cannot create animations (such as "background-color:red").

The properties that can be used are: (using such as "fontSize" instead of CSS names (e.g. "font-size"))

Backgroundposition,borderwidth,borderbottomwidth,borderleftwidth

Borderrightwidth,bordertopwidth,borderspacing

Margin,marginbottom,marginleft,marginright,margintop

Outlinewidth

Padding,paddingbottom,paddingleft,paddingright,paddingtop

Height,width

Maxheight,maxwidth,minheight,minwidth

Font,fontsize

Bottom,left,right,top

Letterspacing,wordspacing,lineheight,textindent

It can be seen that multiple properties can be used in the process of generating an animation through the animation of jquery, or a relative value (the value compared to the current value of the element) may be defined. You need to precede the value with + = or-=, such as (height: ' +=150px '), and you can use the queue mechanism to animate steps such as:

    Div.animate ({height: ' 300px ', opacity: ' 0.4 '}, "slow");    Div.animate ({width: ' 300px ', opacity: ' 0.8 '}, "slow");    Div.animate ({height: ' 100px ', opacity: ' 0.4 '}, "slow");    Div.animate ({width: ' 100px ', opacity: ' 0.8 '}, "slow");

Animations are implemented step-by-step, without regard to compatibility, because they are almost always compatible.

However, the Animate function can only implement some numeric properties, can be implemented with very limited changes, and use this function with stop to use, when a condition is reached to terminate the animation, the settings are more complex.

4. Native JS Animation

Native JS animation using JS code, the animation step by function to write out, you can achieve a variety of animation styles, and can do their own compatibility processing, set up each step of the animation effect, and can complete more complex effects, but the code is very large. As the following example: You need to define all of the dynamic functions, and do the calculation, judgment and processing

<div id= "Odiv" class= "Odiv" >     <div id= "Sdiv" class= "Sdiv" >     </div></div><script language= "javascript" >window.onload = function () {     var odiv = document.getElementById (' Odiv ');     Odiv.onmouseover = function () {      startmover (0);} odiv.onmouseout = function () {      startmover (-200)}} var timer = Null;function Startmover (a) {//speed and target value     clearinterval (timer);//perform current animation while erasing previous animation     var odiv = document.getElementById (' Odiv '); Timer = setinterval (function () {     var speed = (a-odiv.offsetleft)/10;//The velocity parameter change value of the buffered animation//If the speed is greater than 0, the indication is to go right, then the rounding up     Speed = speed>0? Math.ceil (Speed): Math.floor (speed); Math.floor (); Rounding down     if (odiv.offsetleft = = a) {      clearinterval (timer);     } else{      odiv.style.left = odiv.offsetleft+speed+ ' px ';  } },30);} </script>

5. Plugins

Online can find a lot of packaged animation plug-ins, which can be directly introduced into the page, through the initial session and configuration of the way to set, directly on the page to display the animation.

such as: Waves,textillate.js and so on.

6. Animating with Canvas

We can also use canvas to draw on the browser and use its API to animate. Canvas uses a lot of places, especially in the production of H5 mini-games.

The same is the use of coding method by the front-end development engineer to complete the animation effect, canvas than the original JS more efficient, more fluid. With a brush, you can easily achieve more animation effects.

As for how canvas is used, see the tutorial--HTML5 Canvas Common API Summary that is being serialized in my blog.

7. Quoting GIF pictures

If the demand is particularly urgent, and the animation is particularly complicated circumstances, oneself do not grasp the time to achieve the effect, or the cost is too big, really, don't hesitate, on the GIF picture bar, do not tangle in technology, although in the engineer's point of view this is low, but the user's experience is not affected ~ So, don't tangle, Just be quick! Finish the most important!

Several ways to animate the front end (CSS3,JS)