CSS animation development reference notes

Transition the transition

Transitions can define different transitions for an element when switching between different states. Such as toggle between different pseudo-elements such as :hover, :active or state changes implemented by JavaScript.

transition: property duration timing-function delay;
Copy the code

Transition Common attributes

attribute	meaning	value
transition-property	Specifies the name of the CSS property where the transition effect is set	<property>
transition-duration	Specifies how many seconds or milliseconds it takes to complete the transition effect	<time>
transition-timing-function	A velocity curve specifying the effect of the velocity	<timing-function>
transition-delay	Define when the transition effect begins	<time>

CSS velocity curve

options	meaning
cubic-bezier(x1, y1, x2, y2)	Defines a continuous cubic Bessel curve, also known as the easing function
steps(steps, direction)	A step function that divides the output range of equidistant steps
ease	Cubic – Bezier (0.25, 0.1, 0.25, 1.0), start acceleration, middle deceleration
ease-in	Cubic – Bezier (0.42, 0.0, 1.0, 1.0) began slowly and gradually increased in the middle part
ease-out	Cubic – Bezier (0.0, 0.0, 0.58, 1.0), starts fast and decelerates near the end
ease-in-out	Cubic – Bezier (0.42, 0.0, 0.58, 1.0), slow start and end, middle speed
linear	Cubic – Bezier (0.0, 0.0, 1.0, 1.0) at constant speed
step-start	Steps (1, start), the animation immediately jumps to the end state and remains in that position until the animation ends.
step-end	Steps (1, end), the animation will remain in its initial state until the end, jumping directly to its final position.

Animation animation

The animation property is used to specify a group or groups of animations separated by commas.

animation: name duration timing-function 
delay iteration-count direction play-state fill-mode;
Copy the code

Animation Common properties

attribute	meaning	value
animation-name	Use to call the animation defined by @keyFrames	<keyframes-name>
animation-duration	Specifies how long the element plays the animation	<time>
animation-timing-function	A velocity curve specifying the effect of the velocity	<timing-function>
animation-delay	Defines the time to wait before the browser starts executing the animation	<time>
animation-iteration-count	Defines the number of times the animation is played	`infinite
animation-direction	Defines the number of times the animation is played	`normal
animation-play-state	Controls the play state of the element animation	`running
animation-fill-mode	Controls the style after the animation ends	`none

keyframes

Keyframes controls intermediate steps in a CSS animation sequence by defining the style of keyframes (or waypoints) along the animation sequence. Compared to transition, you can control the intermediate steps of the animation sequence better.

/* Syntax specification */
@keyframes slidein {
  from {
    width: 300%;
  }
  to {
    width: 100%; }}@keyframes slidein {
  0% {
    width: 300%;
  }
  100% {
    width: 100%; }}Copy the code

The transform deformation

The transform attribute allows you to rotate, scale, tilt, or translate a given element.

3 d coordinate

The Z axis is perpendicular to the computer screen and points at you, the Y axis is perpendicular to the computer screen 👇, and the X axis is horizontal to the computer screen 👉.

Transform Common attributes

attribute	meaning	value
perspective	The perspective can be set to apply on the parent and child elements, the application effect is different	<length>
backface-visibility	Whether the perspective	`visible
perspective-origin	Specifies the position of the observer to be used as the vanishing point for the Perspective property	`
transform-style	Effect of deformation	` flat (horizontal)
translateX(x)	I rotate X along the X-axis	`
translateY(y)	I rotate Y along the Y-axis	`
translateZ(z)	I rotate Z along the Z axis	<length>
translate(tx, ty)	Moves the element in the plane	`
translate3d(tx, ty, tz)	Moves the position of an element in 3D space	`
scaleX(x)	I’m scaling X along the X-axis	<number>
scaleY(y)	I’m scaling Y along the Y-axis	<number>
scaleZ(z)	I scale Z along the Z axis	<number>
scale(sx, sy)	Change the size of the element, increase or decrease the size of the element, and the scale is defined by the vector	<number>
scale3d(sx, sy, sz)	Change the 3D space size of the element	<number>
rotateX(a)	I’m going to rotate a around the X-axis	<angle>
rotateY(a)	I’m going to rotate a around the Y-axis	<angle>
rotateZ(a)	I’m going to rotate a around the Z axis	<angle>
rotate(a)	Rotate a	<angle>
rotate3d(x, y, z, a)	Rotate the position of the element in 3D space	x,y,z:<number>, a:<angle>
skewX(a)	I’m going to twist a along the X-axis	<angle>
skewY(a)	I’m going to twist a along the Y-axis	<angle>
skew(xa, ya)	Each point on the element in each direction is distorted at an Angle	<angle>
matrix(a,b,c,d,e,f)	Transform the elements according to the matrix parameters	<number> a,b, C,d: linear transformation, e,f: quantity of transformation
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)	3D transformation is performed on the elements according to the matrix parameters	< number > a1, b1, c1, d1, a2, b2, c2 and d2, a3, b3, c3, d3, d4: linear transformation, a4, b4c4: the amount of transformation

Matrix calculation [a, c, e] [x] [ax + by + e] [b, d, f] * [y] = cx + dy + [f] [0, 0, 1], [1] [0 + 0 + 1] matrix (0, 0, 0, 0, tx, ty) = translate(tx, ty) matrix(sx, 0, 0, sy, 0, 0) = scale(sx, Sy) matrix (cosine theta, sine theta, - sine theta, cosine theta, 0, 0) = rotate (theta) matrix (1, tan (theta) y, tan (theta) x, 0, 1) = skew (theta. Theta)Copy the code

The transform pit point

1. Implicitly changes the cascading context
2. The parent element sets transform to limit the child element position:fixed directly to position: Absolute
3. Transform changes overflow’s limit on absolute
4. Transform limits absolute to 100% width

Some common changes trigger backflow (relayout) properties

Box model related properties

• width, height, padding, margin, display,
• border-width, border, min-height, max-height, min-width, max-width

Locate properties and float

• top ,bottom ,left ,right ,position ,float ,clear

Changes the text structure inside the node

• text-align, overflow-y, font-weight, overflow,
• font-family, line-height, vertival-align, white-space, font-size

Properties that only trigger redraw when modified

• color, border-style, border-radius, visibility, text-decoration,
• background, background-image, background-position, background-repeat,
• background-size, outline-color, outline, outline-style, outline-width, box-shadow

Properties are recommended

• opacity
• transform
• translate
• rotate
• scale