What is the difference between transition and animation in CSS3-Front-end Q&A-php.cn

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.

What is the difference between transition and animation in CSS3

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: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间； //合在一起

Copy after login

Chestnut:

Copy after login

The advantage of transition is that it is simple and easy to use, but it has several major limitations.

Transition requires event triggering, so it cannot occur automatically when the web page is loaded.
Transition is a one-time event and cannot occur repeatedly unless triggered again and again.
Transition can only define the start state and end state, but not the intermediate state.
A transition rule can only define changes to one attribute and cannot involve multiple attributes.

CSS Animation was proposed to solve these problems.

animation animation

Control each step of the animation by controlling key frames to achieve more complex animation effects

Properties:

##animation-name Specify keyframe animation The name animation-duration Specifies the time required for animation playback, in seconds animation-timing-function Specify the animation playback method animation-delay Specify the animation start time in seconds ##animation -iteration-count animation-direction The animation is divided into two parts:

Properties	Description




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:

Copy after login

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!