Transitions and animation

1. Basic use of transition

The transition property is a colorful feature of cSS3. Transitions automatically add “tween animation” to an element as it changes from one style to another.

Transition: width 1s linear 0s;

Width: What attribute to transition; 1S: animation duration; Inear: change rate curve; 0S: indicates the delay time.

Transitions are defined in the element’s start state, not its end state.

Which attributes can participate in the transition:

Any numeric type of property can participate in transitions, such as width, height, left, top, border-radius, and opacity.

Background colors and text colors can be transitioned. All morphs (both 2D and 3D) can be transitioned.

If you want all attributes to participate in the transition, you can write all. transition: all 1s linear 0s;

Four small properties of transition

attribute meaning
transition-property Which attributes to transition
transition-duration Animation time
transition-timing-function Animation Change Curve (slow effect)
transition-delay Delay time

2, the transition of slow effect

The third parameter of transition is the slow parameter, which is also the speed curve.

transition : width 1s linear 0s ;

Linear: The speed of change

Bessel curve

Cubic-bezier.com/ Can generate Bezier curve, you can customize animation slow motion parameters.

Transition: width 1s cubic bezier(0.1, 0.7, 1.0, 0.1) 0s;

3. Definition and invocation of animation

Definition of animation: animation can be defined using @keyframes, which means “keyframes”, with a private prefix such as @-webkit- before the project goes live.

Animation invocation: After the animation is defined, you can invoke the animation using the animation property.

Number of animations executed:

Animation: r 1s linear 0s 3; (3 is the number of times)

If you want to execute forever you can write infinite.

If you want to make animation 2, 4, 6….. (even times) automatic reverse execution, then add alternate parameter can;

animation : movelr 2s linear os infinite alternate;

If you want to stop the animation at the last end, you need to get forward;

animation: changeToCircle 1s linear 0s forwards;

Multi-keyframe animation:

@keyframes flash {
      0% {
        transform:translate(0.0);
      }
      25% {
        transform:translate(100px.0);
      }
      50% {
        transform:translate(100px.100px);
      }
      75% {
        transform:translate(0.100px);
      }
      100% {
        transform:translate(0.0); }}Copy the code

4. Focus of the course

What are the four parameters of transition? What is the easing effect of transition?

What attributes can be transitioned?

How to define and invoke an animation? If you want to call animation indefinitely, what should you do?