1

Transition animation: Shows the process of style change to create a transition effect

Transition is a transition that occurs when one or more numeric CSS properties change value

“The transition – the property”

Set excessive properties

A separate attribute

Multiple attributes at the same time

Default value: all Indicates all attributes that can be transitioned.

“The transition – duration”

Unit: s

“The transition – delay”

Set excessive delay for how long to start execution (delay time)

【 the transition – the timing – function 】

The easing function specifies the speed at which the animation effect is executed

[Parameter Value]

Linear Constant speed Ease Default value, gradual deceleration ease-in acceleration ease-out deceleration ease-in-out Deceleration ease-in-out decelerationCopy the code

【 transitional synthesis 】

When there are two times, the first time represents the time required for the transition and the second time represents the delay time

    transition:all Transition time (S) Slow function delay time (S);Copy the code

To set transitions, you need to set at least two parameters: transitions and execution time

    transition:all Transition time (S);Copy the code

2.【transform】2D

2D graph transformation: it is a series of operations such as translation, scaling and rotation of the graph on the two-dimensional plane

translate

Translate, there are two values corresponding to the x and y axes

    transform:translate(X,Y);
Copy the code

Positive value: x to the right, y down negative value: x to the left, y up

If there is only one value, it corresponds to the x axis, and the y axis defaults to 0

    transform:translate(X);
Copy the code

【scale】 to scale

Scale () has two values for the x and y axes

Value represents the multiple of scaling

If there is only one value, the X-axis and Y-axis are both that value

Set the base point. The default value is 50%, 50%. The two values correspond to the X and y axes respectively

    transform:scale(Zoom size);transform-origin:50% 50%;
Copy the code

Rotate 【rotate】 rotate

Rotate () Indicates rotation. The unit is deg

Positive value: clockwise; Negative value: counterclockwise

    transform:rotate(Angle value DEG);transform-origin:100% 200%; (bp)Copy the code

Skew meaning inclined

The skew() method tilts elements at a given Angle along the X and Y axes.

If no second argument is specified, the value is zero.

    transform:skew(Angle value DEG);Copy the code

3. [@keyframes] ANIMATIONS of CSS keyframes

Animations gradually change elements from one style to another.

To use CSS animation, you must first specify some keyframes for the animation.

Keyframes contain the style that the element has at a particular time.

@ keyframes rules

If you specify a CSS style in the @Keyframes rule, the animation will gradually change from the current style to the new style at a specific time.

For an animation to work, it must be bound to an element.

Note:animation-durationAttribute definitionsHow long will it takeIn order toComplete the animation. If not specifiedanimation-durationProperties,animationIt’s not gonna happen becauseThe default valueis0s (0 seconds).

Animation-name Indicates the name of the animation

Animation-duration Animation duration

Animation-delay Specifies the delay time for the animation to start.

Negative values are also allowed. If negative values are used, the animation will start playing as if it had played for N seconds.

Animation-rotund-count Specifies the number of times the animation should run.

Infinite uses the value "infinite" to make the animation last foreverCopy the code

Animation-direction Specifies whether to play the animation forward, backward, or alternately.

[Parameter Value]

【normalThe animation plays normally (forward). Default value [reverse] Animation plays backwards (backwards) [alternate] Animation plays forwards, then backwards [alternate-reverse] Animation plays backwards, then forwardsCopy the code

“Alternate”

Use the value “alternate” to make the animation run forward, then backward

Alternate – reverse 】 【

Use the value “alternate-reverse” to make the animation run backwards, then forwards

Animation-timing-function Specifies the speed curve of the animation.

【ease】 - Specifies to start slow, then speed up, Then slowly end animation (default) [Linear] - specifies the same speed from start to finish [ease-in] - specifies the slow start animation [ease-out] - specifies the slow end animation [ease-in-out] - specifies the start and end of the slower animation Cubic - Bezier (n,n,n,n) - Runs the cubic Bezier function where you define your own valueCopy the code

Animation-fill-mode specifies the style of the target element

CSS animations do not affect elements before the first keyframe or after the last keyframe. The animation-fill-mode property overrides this behavior.

When the animation is not played (before it starts, after it ends, or both), the animation-fill-mode property specifies the style of the target element.

【none] - Default value. The animation does not apply any styles to elements before or after execution. [forwards] - Elements will retain style values set by the last keyframe (dependencyanimation-direction 和 animation-iteration-count). 【backwards】- Elements will get style values set by the first keyframe (backwards)animation-direction) and retain the value for the duration of the animation delay. 【both】- Animation follows both forward and backward rules, extending animation properties in both directions.Copy the code

Animation Short for property of animation

    animation: name duration timing-function;
Copy the code

All abbreviations:

    animation: name duration timing-function delay iteration-count direction;
Copy the code

(CSS learning is over, basic knowledge is complete, start accumulating experience!)