Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what are the differences between transition and animation in CSS3". The editor shows you the operation process through actual cases, the method of operation is simple and fast, and it is practical. I hope that this article "what are the differences between transition and animation in CSS3" can help you solve the problem.

The difference between transition and animation in CSS3: 1. Css transition requires event trigger, while css animation does not; 2. Css transition has only one set of (two) keyframes, setting the start and end actions respectively, while css animation can define multiple keyframes.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Transition transition

Make the css change smoother

Attributes:

Property description transtion-property specifies the property of the transition transtion-duration specifies the time required for the transition transtion-timing-function specifies the transition function transtion-delay specifies the transition delay time

Syntax:

Transiton: transition attribute transition time required for transition animation function transition delay time; / / together

Chestnut:

Img {height:150px; width:150px; transition: height 0.5s linear 0.5s;} img:hover {height:100px;}

Transition has the advantage of being easy to use, but it has several major limitations.

Transition requires event triggering, so it cannot occur automatically when a web page loads.

Transition is one-time and cannot be repeated unless triggered repeatedly.

Transition can only define start and end states, not intermediate states.

A transition rule can only define a change in one attribute and cannot involve multiple attributes.

CSS Animation is proposed to solve these problems.

Animation animation

Control every step of the animation by controlling keyframes to achieve more complex animation effects.

Attributes:

Attribute description animation-name specifies the name of the Keyframe animation animation-duration specifies the time required to play the animation, unit second animation-timing-function specifies the animation playback mode animation-delay specifies the animation start time, unit second animation-iteration-count specifies the number of animation playback times, default is 1, if infinite, the infinite loop playback animation-direction specifies the animation playback direction, default is normal, if alternate, it takes turns to play the animation in reverse

Animation is divided into two parts:

Declare an animation with keyframes

The animation declared by the Keyframe in the animation call.

@ keyframes is a Keyframe, and there can be many frames in an animation.

A style rule in @ keyframes is made up of multiple percentages, and you can create multiple percentages on this rule to achieve an ever-changing effect.

Chestnut:

Img {width:90px; height:90px; animation: mychange 1s infinate 1s;-webkit-animation: mychange 1s infinate 1s;} @ keyframes mychange {0% {width:90px; height:90px;} 50% {width:130px; height:130px;} 100% {width:200px; height:200px;}} @-webkit-keyframes mychange {0% {width:90px; height:90px } 50% {width:130px; height:130px;} 100% {width:200px; height:200px;}}

The 0% / 100% sign 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 be effective, it must be called through the CSS3 animation property.

The difference between css transition and Animation

The main difference is that transition needs to trigger an event to change its CSS attribute over time; animation can also explicitly change the element CSS attribute over time without triggering any event to achieve an animation effect.

1) css transition requires an event trigger (such as hover, etc.) for it to work, while animation does not.

2) the transition has only one set of (two: start-end) keyframes, and the animation can define multiple keyframes.

3) use transition and animation to create a dynamic effect when you hover over the mouse. When the mouse moves away, the effect made by the transition will slowly change back to its original appearance, while the animation will change back to its original appearance.

This is the end of the content about "what is the difference between transition and animation in CSS3". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.