Home >Web Front-end >CSS Tutorial >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 propertytransition-property specifies the CSS property for setting thetransition 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-bezierfunction
. Possible values are values between 0 and 1 transition-delay defines when the transition effect starts. . The transfor
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 axisrotate(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!