PC-side to make Web animation some experience

Recently done some PC-side page, with some animation effect, overall feeling is good, probably recorded some experience

First, we divide the animation type of the PC side into three categories:

• JavaScript and jquery directly control DOM properties
• Properties of the CSS3 transition
• CSS3 's Animation

These three categories are my main use of animation effect of the production source

JavaScript and jquery directly control DOM Properties

　　　　This model is our traditional JS mode, or some packaging on jquery. The main is the direct change of the common properties of the DOM node, left,top,width,height and the like;

Advantages:

　　　　　　　　Compatibility is high, and jquery makes it easy to be compatible with most browsers.

Disadvantages:

JavaScript native writing is more complex, complex multiple changes in the animation effect is not easy to implement

　　　　　　Tips

jquery can be referenced under the easing file to enhance the performance of various animation effects, rich animate,fadein,fadeout,slidedown,slideup and other forms of animation performance

　　 properties of the CSS3 transition

This model is also based on the CSS3 model, preferably in chrome, suitable for a variety of small animations, simple transition switching

Advantages:

Easy to use, simple writing, small code can achieve a good simple animation effect, suitable for hover,active and other simple experience optimization

Disadvantages:

Lack of control mode, the form of change is relatively single, can not be fine control, not suitable for complex animation

　　　　　　Tips

Transition several attributes of the change (example):

General change: transition:all 2s ease-in-out 1s;

Parametric effect: all--All properties participate in transition transitions

2s--animation effect lasts two seconds

ease-in-out--slow start slow end transition effect

1s--the delay from triggering the animation to the actual start of the animation

3d change: Add 3d attributes, mentioned later;

　　

CSS3 's Animation　　

This model is also based on CSS3, which is best performed in Chrome, and is suitable for a variety of new and more complex animation effects

Advantages:

　　　　　　　　Easy to use, animation to achieve a better understanding of the logic, suitable for all kinds of animation effects

Disadvantages:

Keyframe requirements are high, and you may need to adjust the keyframe design more than once if the animation effect is demanding

Tips

Animation changes several necessary and attributes (example):

　　　　　General Change:-webkit-transform:rotatex (0DEG);

-webkit-animation:doll_123 2s ease-in-out 1s;　　　　　　　　　　　　　　　　

@-webkit-keyframes doll_123 {
0% {
-webkit-transform:rotatex (90DEG);
}
20% {
-webkit-transform:rotatex ( -40DEG);
}
40% {
-webkit-transform:rotatex (30DEG);
}
60%{
-webkit-transform:rotatex ( -20DEG);
}
80%{
-webkit-transform:rotatex (+10DEG);
}
90%{
-webkit-transform:rotatex (5DEG);
}
100%{
-webkit-transform:rotatex (0DEG);
}
}

Parametric effect:-webkit-transform:rotatex (0DEG)--the style after the animation is completed ( This style must have, or the style will return to the original state after the animation is finished )

doll_123--Setting Change function setting

2s--duration of animation effect (time taken from 0%--100%)

ease-in-out--animations start and end slowly, middle fast

1s--the delay time from triggering the animation to actually starting the animation

Another: Animation-iteration-count is used to set the number of animation plays. Animation-direction for the rotation of the response to play animation but not much, usually can use the default value is good

3d Change (note to match the above three kinds of animation implementation will be animated, otherwise it is only change is not animation)

Ps:css can not realize the two-dimensional picture into three-dimensional graphics, so CSS3 implementation of the 3d effect can only be achieved similar to the card flip or change, the real 3d structure display needs to use Webgl,three.js.

Required attributes for 3d changes:

-webkit-transform:perspective (600px) Rotatey (180deg);

Property Description:

Perspective (600px)--for setting the angle of view position, can be roughly understood as the impact of the deformation of the 3d change element, the smaller the effect of the greater (the smaller the value, the closer the view of the screen, near large far smaller effect the more obvious, similar to the real life of reading, glasses by book very close, The word near the glasses looks bigger than the distance, if the book is farther away, it looks like the word size is similar )

Rotatey (180DEG)--for setting the angle of 3d rotation, which is rotated 180 degrees according to the Y axis.

　　　　　　　　　　　

Additional properties for 3d changes:

The-webkit-transform-origin:100% 100% 0--is used to set the base point of the 3 rotation, changing the coordinate system base point in the X-direction 100% position of the DOM node, changing the coordinate system base point in the Y-direction 100% position of the DOM node, the z-axis at 0 position, ( It is important to note that the position of the coordinate system is changed, not the position of the picture, the abstract is probably understood to change the X-value of the base point position will change the y-axis effect, changing the Y-value of the base point position will change the x-axis effect .

-webkit-transform-style:preserve-3d--is used to set the 3d change, but in fact, as long as the transform set the position of the point of view is 3d change, 2d change is no point of view, but with this property can be clearly displayed is 3d change.