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.