CSS 3 transformation:

With CSS3 transformations, elements can be moved, scaled, rotated, stretched, or stretched. You can use 2D or 3D transformations to transform your elements.Copy the code

Subattributes: Translate (), rotate(), scale(), skew()

1.translate(x,y); Translate (x,y) moves both horizontally and vertically at the same time. B) : translateX(x) moves only in the horizontal direction (X-axis movement). C) : translateY(y) moves only in the vertical direction (Y-axis movement). Rotate (ndeg): rotate n as a number 3. Scale (x,y) Scale (x,y) : scale(x,y) scales an element horizontally and vertically at the same time. Note: Y is an optional parameter. If Y is not set, it means that the scaling in both directions is the same. B) : scaleX(x) elements scale only horizontally (X-axis scale). C) : scaleY(y) elements scale only vertically (Y-axis scale). Skew (XDEg, YDEg) : Skew (x, Y) distorts elements in both horizontal and vertical directions (x and Y axes are distorted at a certain Angle at the same time). The first parameter corresponds to the X-axis, and the second parameter corresponds to the Y-axis. If the second argument is not provided, the value is 0, i.e., there is no tangent in the y-direction. B) : skewX(x) only distorts elements in the horizontal direction (X-axis distortion). C) : skewY(y) only distorts elements in the vertical direction (Y-axis distortion).Copy the code

Transform-origin (x,y) x,y can be expressed in percentage

In the case that transform-origin is not reset to change the origin position of elements, CSS deformation operations such as rotation, displacement, scaling, and distortion are based on the center position of elements. Transform-origin: 0, 0; transform-origin: 0, 0; Starting from the upper left corner 50% 0; The center above is the origin 100% and the 50% is the origin right center

Iii. Transtion: Transition animation

Transition-property: specifies a transition or dynamically simulated CSS property. All CSS properties use all 2, transition-duration: specifies the time required to complete the transition. 3. Transition-timing -function: specifies the transition function. Ease to a linear speed ease-in ease-out ease-in-out 4. Transition-delay: specifies the time at which the beginning of the transition occurs. The unit is s seconds or ms milliseconds. Transition: an attribute or all time to change; For example: transtion:width 2s; transtion:all 3sCopy the code

Iv. Introduction to @Keyframes

Keyframes are called keyframes. In CSS3 it starts primarily with "@keyframes", followed by the animation name with a pair of curly braces "{... } ", parentheses are some style rules for different time periods. For example, create more percentages between "0%" and "100%", and add different styles to the elements that need animation effect in each percentage respectively, so as to achieve a constantly changing effect. When defining the animation name in @keyframes, 0% and 100% can also be represented by keywords from and to. Where 0% corresponds to from and 100% corresponds to to. Step 1: In the CSS style, define the animation style @keyframes animation name {from{CSS style} to{CSS style}} or use the percent sign @keyframes animation name {0%{left: 0; top: 0; } 30%{ left: 800px; top:0; border-radius: 50%; } 60%{ left: 800px; top:400px; background-color: red; border-radius: 50%; transform: scale(.5); } 90%{ left: 0; top:400px; background-color: green; border-radius: 50%; } 100%{ left: 0; top: 0; Animation: The name of the animationCopy the code

Five, the animation:

Animation: myfirst 5s Linear 2S infinite alternate both; < span style = "padding-top: 0px; padding-top: 0px; Animation-fill-mode: none: default value, which indicates that the animation will be performed and finished as expected. At the end of the last frame of animation, the animation will be backwards towards the initial frame forward: Backwards: can quickly apply the first frames of an animation while applying animation styles to elements. Animate elements for forwards and backwards at the same time 5. Set the waiting time before the animation starts to play. Unit: s 6. Set the number of times the animation is played. Animation-restage-count: Usually set to an integer, the default is 1. Set animation-direction: normal is the default value. Each animation loop is played forward. Another value is alternate, his role is that flash in the odd times play forward, once the first even number 8, set the animation to play to the opposite direction of state broadcast animation - play - state: paused an animation to play will be stopped. Running replays the suspended animation, not necessarily from the beginning of the element animation, but from where it was pausedCopy the code