Transition and animation,

Transition and animation,

Transition emphasizes that transition is the animation of two key frames.

Animation emphasizes that process and control are the animations of multiple key frames.

1. transition

Attribute	Description
Transition-property	Specify the css attribute for Transition
Teansition-duration	Time required to complete the transition
Transition-timing-function	Specify the transition function
Transition-delay	Specify the delay time when the transition starts.

Attributes can be written separately or together, for example:

Img {height: 15px; width: 15px; transition: 1 s 1 s height interval ;}

Or:

Img {width: 15px; height: 15px; transition-property: height; transition-duration: 1 s; transition-delay: 1 s; transition-timing-function: interval ;}

Img: hover {width: 45px; height: 45px ;}

Because the transition time and the transition delay time are both seconds, the first time will be resolved to transition-duration, and the second will be resolved to transition-delay

Stenographer: transition: time required for transition attribute transition animation Function transition Delay Time

Attribute details

Transition-property: not all attributes can be transitioned. Only an intermediate point value of an attribute can have the transition effect. For details, see the list.

Transition-duration: specifies the time it takes to transition from one attribute to another. The default value is 0. If it is 0, it indicates that the transition is instantaneous, but the transition effect is not displayed.

Transition-timing-function: There are several types of transition functions:

Liner: constant speed

Slow-in: deceleration

Timed-out: acceleration

Acceleration-in-out: acceleration and deceleration

Cubic-bezeiser: Here is the cubic besell curve.

Trigger transition

Simple code does not trigger any transitional operations. It needs to be triggered by user behaviors (such as clicks and suspensions). The trigger methods include:

: Hover: focus: checked media query trigger js trigger

Limitations

It is a bit simple and easy to use, but there are also a few great limitations

(1) transition takes time to trigger and cannot be automatically triggered when a webpage is loaded.

(2) The transition is one-time and cannot be repeated unless it is triggered again.

(3) transition can only define the start and end states, but cannot define the intermediate states, that is, there are only two States.

(4) A transition rule can only define changes to one attribute, and cannot contain multiple attributes.

Animation was proposed to solve these problems.

Ii. animation

The animation attribute of css3 can control each step of an animation by controlling the key frame like flash to achieve more complex animation effects. It consists of two parts:

(1) declare an animation through frames similar to those in flash Animation

(2) Call the animation of the Key Frame declaration in the animation attribute

Note: You need to add a browser prefix.

Animation attributes

Attribute	Description
Animation-name	Specifies the animation name of a key frame. If none is the default value, no animation is generated. It can be used to overwrite any animation.
Animation-duration	Used to specify the time required for animation not to be placed
Animation-timing-function	Set the playing mode of the animation
Animation-delay	Specifies the animation start time.
Animation-iteration-count	The default number of cycles that the specified animation does not play is 1, and infinite is infinite loop playback.
Animation-direction	The default playback direction of the animation is normal. Each loop is played forward (0-100), and alternate. If the animation is played for an even number of times, it is played forward. If the animation is base, it is played back.
Animation-play-state	Set the animation playback status. The default value is running and pause.
Animation-fill-mode	Set the time outer attribute of the animation, that is, the operation before and after the animation starts. The default value is none, and the animation ends and returns to the State when the animation is not started; after the forwards animation ends, it continues to apply the position of the last key frame, that is, it is saved in the end state; backwards returns the animation to the first frame state; both applies the forwards amount backwards rule in turn.

@ Keyframes

Animation effects produced by animations in css3 include:

 

(1) declare an animation with a key frame

(2) The animation that calls the key frame declaration in animation

@ Keyframes is the key frame. This needle is similar to the frame in flash. One animation has many frames in the Chinese Emy of sciences.

A style rule in @ keyframes is composed of multiple percentages. You can create multiple percentages in this rule to achieve a continuously changing effect. In addition, @ keyframes must be prefixed with webkit. For example:

 

div:hover {  -webkit-animation: 1s changeColor;  animation: 1s changeColor;  }@-webkit-keyframes changeColor {  0% { background: #c00; }  50% { background: orange; }  100% { background: yellowgreen; }}@keyframes changeColor {  0% { background: #c00; }  50% { background: orange; }  100% { background: yellowgreen; }}

In the code, the 0% percent of 100% cannot be omitted. 0% can be replaced by form, and 100% can be replaced by to. to make the animation effective, you must use the animation attribute of css3 to call it.

Differences
The animation attribute is similar to the transition. They all change the attribute value of an element over time. The main difference is that the transition must trigger an event to change the css attribute over time;
Animation can also explicitly change the element css attribute over time without triggering any event to achieve an animation effect.