Summary of transition

Transition means a transition between the beginning and the end of an animation.

Attribute values



The transition functions are as follows:

  • At a constant speed liner:
  • Ease – in: accelerated
  • Ease – out: slow down
  • Ease-in-out: Speed up and then slow down
  • Cubic – Bezier: Cubic Bezier curve, can be customized

grammar

Transition: Indicates the delay of the attribute name duration

transition: right 4s; 
transition: right 4s ease-in-out;
transition: right 4s ease-in-out 1s; 
Copy the code

You can separate two different attributes with a comma

transition: margin-right 4s, color 1s; 
Copy the code

You can use all to represent all attributes

The transition: all 0.5 s ease - out;Copy the code

limitations

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

  • Transition needs to be triggered by an event, so it can’t happen automatically when a web page loads.
  • Transition is a one-time thing. It cannot happen again and again unless it is triggered again and again.
  • Transition can only define a beginning state and an end state, not an intermediate state, so there are only two states.
  • A transition rule defines only one property change, not multiple properties.

Pay attention to

  • Not all properties can transition,display: block -> noneCan’t transfer
  • In general usevisibility: visible -> hiddenoropacity : 1 -> 0alternative

Summary of animation

Animation component

  • Key frames keyframes
  • Animation attributes

Since we can specify keyframes at any point, animation can be used to do more complex animations

@keyframes

The animation of CSS3 mainly includes two parts: 1. 2. Call the animation declared by the keyframe in the animation.

@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}
Copy the code
  • If 0% or 100% do not specify a keyframe, the default attribute value for that element is used
  • If there is a negative percentage or a percentage greater than 100%, the keyframe is ignored
  • If there are multiple @keyframes, the browser recognizes only the value inside the last @keyframes
  • Empty keyframes rules are valid, and they override previous valid keyframes

Animation attributes

(1) Animation-name: None is the default value, and no animation effect will be generated. If multiple animations attempt to modify the same property, the end of the animation list overwrites the beginning

(2) animation-duration: the default value is 0,0 s means that the animation has no time and the duration cannot be negative

(3) animation-timing-function: same as transition-timing-function \

(4) animation-delay: the time needed to wait when the animation starts to execute. If it is negative, notice that the animation skips 2 seconds into the animation cycle. (5) animation-rotund-count: Defines the number of times the animation is played, which is 1 by default, or infinite if it is

(6) Animation-direction: the default is nomal, each loop is played forward, (0-100), the other value is alternate, the animation is played forward if it is played an even number of times, and the animation is played in the opposite direction if it is the cardinal word

(7) Animation-state: the default values are RUNNING, play, paused, and paused

(8) animation-fill-mode: defines the operations that occur before and after the animation starts. The default value is None. At the end of the animation, it returns to the state before the animation starts. Forward, the position of the last key frame is continued after the end of animation, namely saved in the end state; Backwards, moving animation back to frame 1; Both: forwards and forwards in rotation.

grammar

animation: name duration timing-function delay iteration-count direction play-state fill-mode