css dynamic effects @keyframes

---

1. Create animation effects

css animation effect creation:

Percentage (0%, 100%) represents the style code that is run when the animation reaches that progress.

@keyframes rotateAnimate1 {
    
    
  0% {
    
    
    transform: rotateX(45deg) rotateZ(0deg);
  }
  100% {
    
    
    transform: rotateX(45deg) rotateZ(360deg);
  }
}
@-webkit-keyframes rotateAnimate1 {
    
    
  0% {
    
    
    transform: rotateY(45deg) rotateX(-45deg) rotateZ(0deg);
  }
  100% {
    
    
    transform: rotateY(45deg) rotateX(-45deg) rotateZ(-360deg);
  }
}

2. Reference in css selector

The code is as follows (example):

 -webkit-animation: rotateAnimate1 2s infinite linear;
  animation: rotateAnimate1 2s infinite linear;

rotateAnimate1: The name of the animation written by myself above
2s: Indicates the execution time (total time)
infinite: Here is the number of plays; (infinite means unlimited playback, and can also be replaced by a number, representing how many times it is executed)
linear: Indicates the execution rate ; (Here linear means execution at a uniform speed throughout the process)

---

3. Parameter explanation

This is the official case (explain yourself)
animation: name duration timing-function delay iteration-count direction;

animation: (animation name) (animation execution time) (animation execution speed) (how long the animation is delayed to be executed) (number of plays) (whether to play in turn);

---

You don’t have to enter all the parameters. If you don’t want some parameters, you can ignore them. If they are not filled in, they will use the default values ​​for rendering! ! !

For the explanation of parameters, here is the explanation in w3cshool for convenience.

animation (calling animation and explanation of parameters, common with -webkit-animation)

duration (time for animation execution)

Here is your own input, in seconds

timing-function (speed of animation execution)

delay (how long the animation is delayed to start)

Here you also enter it yourself, in seconds.

iteration-count (number of animation executions)

direction (whether to play in turns)

These are some of my personal opinions on CSS animation, please correct me if there are any discrepancies! ! !

---

-webkit-keyframes refers to the use in Firefox browser. I personally use Google Chrome and have not encountered any problems so far! ! !

---

4. Digression (some css functions)

1. Scaling function

The scale(x,y) function allows the element to scale the object according to the central origin. If it is greater than 1, it will be enlarged, and if it is less than 1, it will be reduced. If it is a negative value, it will be flipped first and then scaled.
transform:scale(-2,2); call scaling

2. Rotation function

rotate(x) rotates through the origin center of the selected element, positive: clockwise, negative: counterclockwise (2d).

transform:rotate(45deg) calls rotation, 45deg represents the angle of rotation, 0-360deg, can be a negative value, positive or negative does not affect rotation, only the direction of rotation

3. Tilt function

skey(x,y) can tilt the element at a certain angle around the x-axis and y-axis with its center position.
transform: skew(-10deg); Here we call skew, just put the angle in the brackets, 0-360deg

---

The three functions can be used in a transform at the same time. Proper combination can produce unexpected effects.

---

Today is another salty day! ! !