The difference between transition and animation in CSS3: 1. CSS transition requires event triggering, but CSS animation does not; 2. CSS transition only has one set (two) of key frames, which set the start and end actions respectively. CSS animation can define multiple keyframes.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
transition transition
Make css changes smoother
Attribute:
Property | Description |
---|---|
transtion-property | Specifies the property of the transition |
transtion-duration | Specify the time required for transition |
transtion-timing-function | Specify the transition function |
transtion-delay | Specify the transition delay time |
Syntax:
transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间; //合在一起
Chestnut:
The advantage of transition is that it is simple and easy to use, but it has several major limitations.
CSS Animation was proposed to solve these problems.
Control each step of the animation by controlling key frames to achieve more complex animation effects
Properties:
Properties | Description |
---|---|
Specify keyframe animation The name | |
Specifies the time required for animation playback, in seconds | |
Specify the animation playback method | |
Specify the animation start time in seconds | |
Specifies the number of times to play the animation, the default is 1, if it is infinite, it will be played in an infinite loop | |
Specify the playback direction of the animation. The default is normal. If it is alternate, it will play in reverse in turn. |
A style rule in @keyframes is composed of multiple percentages. Multiple percentages can be created on this rule to achieve a constantly changing effect.
Chestnut:
The percent signs of 0% and 100% in the above code cannot be omitted, 0% can be replaced by from, and 100% can be replaced by to. For the mychange animation to have an effect, it must be called through the CSS3 animation property.
The difference between css transition and animationThe main difference is that transition needs to trigger an event to change its CSS properties over time; Without triggering any events, animation can also explicitly change the CSS properties of elements over time to achieve an animation effect.
1) CSS transition needs to be triggered by an event (like :hover, etc.) to work, but animation does not.
2) The transition has only one set (two: start-end) of key frames, and animation can define multiple key frames.
3) Use transition and animation to create a dynamic effect when the mouse is hovering. When the mouse is moved away, the effect created by transition will slowly change back to its original appearance, while the animation will snap. Change back to your original self.
(Learning video sharing:
css video tutorial,web front-end introductory tutorial)
The above is the detailed content of What is the difference between transition and animation in CSS3. For more information, please follow other related articles on the PHP Chinese website!