Home > Developer > Web Develop
The difference between the transition module and the Animation module: The transition animation needs to be artificially triggered, and the animation module does not require artificial
The same point: both are animations, all of which are new to the system, all of which are animated to meet the three elements
Three elements: 1. Tell the system which animation to execute, to write out the animated name; Animation-name: name;
2. Tell the system that we need to create a name for the animation; @keyframes name {
from{
}
to{
}
}
3. Tell the system how long the animation lasts; Animation-duration: Duration of animation;
Other properties: Speed of Animation motion: animation-timing-function: (linear-linear ... ）；
Animation delay number of seconds to execute: animation-delay: seconds;
Animation execution times: animation-iteration-count: number of times;
Whether the animation rotates in reverse: animation-direction:alternate (rotate reverse) normal (normal playback, default value);
Controls the occurrence and stillness of animations: animation-play-state:running (animation is playing, default value) paused (animated static);
Note: The second way to make animations without from-to with percentages, the benefits can be set any number of nodes
0%{
}
50%{
}
100%{
}
The animation is in a certain state: 1. Wait state; 2. Execution status; 3. End State;
Animation-fill-mode (style of animation wait and end state): None (no change)
Backwards (the state of the first frame of the animation)
Forwards (the state of the last frame of the animation)
Both (animation starts with the first frame's style and ends at the last frame)
Animation module ligatures: Animation: Animation name animation time long animation motion speed delay time the number of times to perform a round-trip animation;
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Animation module</title> <style>@keyframes{ }Div{animation-duration: ; } </style></Head><Body><Div></Div></Body></HTML>
Animation module of CSS Animation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
