animation can name the name of animate, with duration animate cycles completed, animated with timing-function speed profile, delay animated when to start, iteration-count set the number of animation playback, the next direction a predetermined cycle whether reverse play after play-state animation is in progress or suspended, fill-mode animate stopped state what position
transition property to set a transition effect attribute name, duration of the transition effect setting period, the predetermined speed velocity profile effect timing-function, delay begins when the transition effect is set;
the difference:
1, transition is a transition is a process of change in the style value, only the beginning and end; animation is actually called keyframes can be set by a state of the intermediate frame and keyframe combination;
2, animation with @keyframe can not trigger the time this process is triggered, and the transition is triggered by the need to match or js hover event;
3, animation can set many properties, such as the number of cycles, the animation end of the state, etc., transition can only be triggered once;
4, animation can be set for each frame in conjunction keyframe, but only two transition;
5, in terms of performance: browser has a main thread and the thread layout; the main thread is typically run js, page layout bit map is generated, etc., and then transmitted to the layout bit map to generate a good thread, the thread will typesetting by GPU to draw the bitmap on the page, the main thread will request bitmap and so on; in this way we can change a lot of property with the use of aniamtion time, as we change the width, height, postion and so these changes document flow when the property will cause the page reflux and redraw performance impact is relatively large, but we use the transition time will generally be carried out in conjunction with tansfrom rotation and scaling does not generate a new bitmap, of course not It will cause the rearrangement of the page;