Introduction to related properties of CSS to achieve dynamic effects of images

css realizes picturesdynamic effects.

Usage method using hoverPseudo class

Operation process First determine the effect to be achieved and set the initial representationState

AnimationCss properties used

transition property

transition-property specifies the CSS property for setting the

transition effect name.

(

none No properties will get the transition effect.

all All properties will get the transition effect.

property definition A comma-separated list of CSS property names to apply the transition effect to.

)

transition-duration specifies how many seconds or milliseconds it takes to complete the transition effect.

transition-timing-function Specifies the speed curve of the speed effect.

(

linear specifies a transition effect that starts and ends at the same speed (equal to cubic-bezier(0,0,1,1)).

ease specifies a slow speed A transition effect that starts, then becomes fast, and then ends slowly (cubic-bezier(0.25,0.1,0.25,1))

ease-in specifies a transition effect that starts at a slow speed (equal to cubic-bezier). (0.42,0,1,1)).

ease-out specifies the transition effect that ends at a slow speed (equal to cubic-bezier(0,0,0.58,1)). ease-in-out specifies a transition effect that starts and ends at a slow speed (equal to cubic-bezier(0.42,0,0.58,1))

cubic-bezier(n,n,n,n). Define your own value in cubic-bezier

function

. Possible values ​​are values ​​between 0 and 1

)

transition-delay defines when the transition effect starts. . The

trans

for

m property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.

translateX(x) defines the transformation, using only the X-axis value.

translateY(y) defines the transformation, just using the Y-axis value.

scale(x,y) defines a 2D scaling transformation.

scaleX(x) Defines the scaling transformation by setting the value of the X axis.

scaleY(y) Defines the scaling transformation by setting the value of the Y axis.

rotate3d(x,y,z,angle) defines 3D rotation.

rotateX(angle) defines the 3D rotation along the X axis

rotateY(angle) defines the 3D rotation along the Y axis

rotateZ(angle) defines the 3D rotation along the Z axis 3D rotation of the axis

rotate(angle) Defines the 2D rotation, specifying the angle in the parameter. Set transform-origin (rotation center point)

skew(x-angle,y-angle) Defines a 2D skew transformation along the X and Y axes.

skewX(angle) Defines a 2D skew transformation along the X-axis.

skewY(angle) Defines the 2D skew transformation along the Y axis.

The above is the detailed content of Introduction to related properties of CSS to achieve dynamic effects of images. For more information, please follow other related articles on the PHP Chinese website!