Your location:Tech News>News>Script>Several ways to animate the front end (css3, js)

Latest News

Several ways to animate the front end (css3, js)



  Create a dynamic page is a front-end engineer the necessary skills to achieve good animation can greatly improve the user experience, enhanced interactivity, animation then realized how many ways, this has been selective phobia I will summarize, in order to choose the best implementation in the development of.

  1.The transition css.


  transition: property duration timing-function delay;

  property: Fill changing needs css attributes: width, line-height, font-size, color and the like;

  duration: completion time required for transition effects (2s or 2000ms)

  timing-function: effect complete velocity profile (linear, ease, ease-in, ease-out, etc.)




  Uniform (equal cubic-bezier (0,0,1,1)).


  From slow to fast and then slow (cubic-bezier (0.25,0.1,0.25,1)).


  Gradually becomes fast (equivalent cubic-bezier (0.42,0,1,1)).


  Slowly slow (equivalent cubic-bezier (0,0,0.58,1)).


  First faster then slower (equivalent cubic-bezier (0.42,0,0.58,1)).Fade in fade effect

  cubic-bezier (n, n, n, n)

  Define their values cubic-bezier function.Possible values are values between 0 and 1.

  timing-delay: the delay time to trigger animation effects (2s or 2000ms).

  The defaults are: all 0 ease 0

  transition seize property changes the set initial state and the state of completion, the animation is accomplished by setting the speed profile.Css property can involve a variety of changes, the default is all, all the properties will change at the time of departure, in the form of animation to show up.

  This is animated css3, so ie9 following is not supported by other browsers need to add the prefix, and only two states, does not support custom intermediate state.




  tips: transform a change attribute elements allows us to rotation, scaling, moving or tilting.As the transition may need to change attributes.


  transform: rotate (9deg);

  -ms-transform: rotate (9deg);

  -moz-transform: rotate (9deg);

  -webkit-transform: rotate (9deg);

  -o-transform: rotate (9deg);

  2.css3 of animation properties


  animation: name duration timing-function delay iteration-count direction;

  name: Name keyframe, which is defined in the name of the animation keyframes, and this name is used to distinguish different animation.

  duration: completion time required for animation (2s or 2000ms)

  timing-function: to complete the animation speed profile

  delay: delay before the movie starts

  iteration-count: Animation Views

  direction: if the reverse rotation animation playback (normal: the normal sequence of playback, playback at a reverse Alternate) if the animation to play only once, the property has no effect.

  Use animation property animation can be more flexible set of animation frames, different keyframe (animation frame) is set to achieve a lot of elegant effects, keyframe animation in percentage is the ratio of the total time to complete.

  animation is to set the total animation, and provided on the respective keyframe animation name, and then set a specific keyframe animation effects in.Of course, as is the css3 properties still need to pay attention to its compatibility, plus the prefix must.




  3.Jquery function of animate


  $ (Selector).animate (styles, options)

  styles: value and generate css style animation;

  options = {speed: speed of the animation (optional parameters: slow, normal, fase) easing: speed of the animation function (optional parameters: swing, linear) callback: a function to be executed after completion of the animation; queue: if placed in effect queue, is a Boolean value is false starts immediately specialEasing: a plurality of styles parameter or attribute mapping function and a corresponding easing.}

  $ (MyElement).animate ({

  left: 500,

  top: 200

  }, {Duration: ''3000'',

  specialEasing: {

  left: ''swing'',

  top: ''linear''



  The element method is changed from one state to another state by the CSS style.CSS property value is gradually changing, so you can create animation.

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

  :( property can be used are the use of such "fontSize" to set up, rather than CSS name (such as "font-size"))

  backgroundPosition, borderWidth, borderBottomWidth, borderLeftWidth

  borderRightWidth, borderTopWidth, borderSpacing

  margin, marginBottom, marginLeft, marginRight, marginTop


  padding, paddingBottom, paddingLeft, paddingRight, paddingTop

  height, width

  maxHeight, maxWidth, minHeight, minWidth

  font, fontSize

  bottom, left, right, top

  letterSpacing, wordSpacing, lineHeight, textIndent

  Seen by the animation generation process jquery animation can simultaneously use a plurality of attributes may be defined relative value (current value with respect to the value of the element).Required in front of the value with + = or - =, such as (height: ''+ = 150px''), queuing mechanism may be used such as animation step formula:

  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");

  Animation will be realized step by step in accordance with the order, and without regard to compatibility, since almost all compatible.

  However, animate function only able to achieve some value properties, change can be achieved very limited, but also with the stop when using this function to use, the animation is terminated upon reaching certain conditions, more complex set.

  4.Native js animation

  Native js js code use animation, animation step function written in a way, you can achieve a variety of animation styles, and can do their own compatibility processing, set up their own animation of each step, and able to complete more complex effect, but the code a large amount.As in the following example: all dynamic defines its own function, and calculated, and the determination process







  Internet can be found to many packaged animation plug-ins that can be introduced directly into the page, set by the first test and then configure the way to show the animation directly in the page.

  Such as: waves, textillate.js etc..

  6.Use canvas animation

  We can also use canvas to draw on the browser and using its api, animation.Local canvas used very much, especially in the production of mini-games on h5.

  Are encoded using the same way to complete the animation front-end development engineers, canvas than the high-efficiency multi native js, smooth and more.By way of the brush, can easily achieve more animation effects.

  As for how to use the canvas, see my blog is being serialized tutorial --html5 canvas common api summary.

  7.References gif image

  If in particularly urgent demand, and animation has been particularly complex cases, he did not grasp the effect achieved on time, or too costly, really, do not hesitate to gif image on it, do not tangle in technology, although in the engineer''s point of view on doing so very low, however, the user experience is not affected - so, do not tangle, is to fast!Complete the most important!

  That''s all for this article, I want to be helpful to learn, I hope you will support script Home.

Recommend article

Relate article