1. 8 properties and key frames of animation
animation: compound attribute, set the animation attribute of the object, there are 8 attributes in total
1.1 animation-name
Function: Set the animation name applied to the object
Writing format: @keyframes animation name
.box{
margin: auto;
width: 200px;
height: 600px;
padding-top: 150px;
transform-style: preserve-3d;
animation: flesh 5s 10;
}
@keyframes flesh{
form{
transform: rotateX(0) rotateY(0);
}
to{
transform: rotatey(360deg) rotatex(45deg);
}
}
1.2 animation-duration
animation-duration is mainly used to set the duration of animation
1.3 transition-timing-function
The transition-timing-function attribute is used to set the transition type of the animation, and its common values are as follows:
- linear: linear transition
- ease: smooth transition
- ease-in: from slow to fast
- ease-out: from fast to slow
- ease-in-out: from slow to fast to slow
1.4 animation-delay
The animation-delay attribute sets the delay time of the animation, and the common value of the general attribute is a number
1.5 animation-iteration-count
The animation-iteration-count attribute sets the number of loops for the animation.
Attribute values:
- infinite: infinite loop
- number: the number of times to loop
1.6 animation-direction
The animation-direction attribute sets whether the animation moves in reverse.
Commonly used attributes take the following values:
- normal: running in the positive direction
- reverse: run in the opposite direction
- alternate: The animation runs normally and then runs in the opposite direction, and continues to run alternately
- alternate-reverse: The animation runs in the reverse direction and then in the forward direction, and continues to run alternately
1.7 animation-play-state
The animation-play-state attribute sets the state of the animation
. Common values:
- running: exercise
- paused: suspended
1.8 animation-fill-mode
The animation-fill-mode attribute sets the state outside the animation time
. Common values:
- none: the default value, does not set the state of the object animation
- forwards: Set the object state to the state at the end of the animation
- backwards: Set the object state to the state at the beginning of the animation
- both: Set the object state to the state at the beginning or end of the animation
1.9 Keyframes
- Available from to
- percent direct definition
2. Transform the position of the element - translation
- When the transform attribute takes the value translate(x, y), it means the translation of the element.
- Attribute value: value, percentage, negative value on the x-axis means moving to the left, negative value on the y-axis means moving up
@keyframes flesh{
from{
transform: translateX(0);
}
to{
transform: translateX(-400px);
}
}
3. Change the state of the element - rotation
- Rotation: Rotation around a specified axis at a specified angle
- Function: rotateX rotateY
- Function value: number
- Unit: deg (degrees)
- The value is positive to rotate clockwise, and the value is negative to rotate counterclockwise
4. Change the size of the element - zoom
- Scale: change the size of an element
- Function: scale(x, y)
- If there is only one scale value, it means that the xy axis changes by the same multiple at the same time
5. Change the shape of the element - tilt
- Function: skew()
- Value: angle
6. Transition
6.1 What is transition
Transition: The process of smooth transition of an element from one state to another.
Transition attribute: transition
6.2 Four Elements of Transition
6.2.1 transition-property
- transition-property: When the state of the element changes, the transition effect will be used. When the specified property changes, the transition effect will be triggered.
- 语法：
transition-property:none | all | property
transition-property:background;
transition-property:all;
6.2.2 transition-duration
- transition-duration: The completion time of the transition effect, usually in seconds and milliseconds
- Syntax:
transition-duration:1s;
6.2.3 transition-timing-function
transition-timing-function: The speed effect of the transition within the specified time (transition-duration)
Value:
- ease : default, start slow, get faster, end slow
- linear: start to end at a constant speed
- ease-in: slow start, speed up effect (from slow to fast)
- ease-out: slow end, deceleration effect (from fast to slow)
- ease-in-out: start and end at a slow speed, speeding up and then slowing down
6.2.4 transition-delay
transition-delay: Transition delay time, in seconds or milliseconds