From previous studies, we know that simple transition animation can be achieved using the transition attribute, but the transition animation can only specify the start and end states. The entire process is controlled by a specific function, which is not very flexible. In this section we will introduce a more complex animation - animation.
Animation: Similar to transition, some dynamic effects can be achieved. The difference is that transition needs to be triggered when a certain attribute changes, while animation effects can automatically trigger dynamic effects. To set animation effects, you must first set a keyframe. Keyframes set each step of animation execution. The format of keyframe settings is as follows:
<style>/*Define animation keyframes. The name of the keyframe is test*/@keyframestest{/*from indicates the starting position of the animation, which can also be expressed by 0%. */from{margin-left:0;}/*to indicates the end position of the animation, which can also be expressed by 100%. */to{margin-left:100%;}}</style>Animation in CSS is similar to frame-by-frame animation in flash. It is delicate and very flexible. Using animation in CSS can replace dynamic images, Flash animation or special effects implemented in JavaScript in many web pages.
Animation is the effect of gradually changing an element from one style to another. We can change as many styles as we want as many times as we want (very official answer).
CSS3animation (animation) property.
@keyframes
With the @keyframes rule we can create animations.
Animations are created by gradually changing one set of CSS styles into another. We can change this set of CSS styles multiple times during the animation. Specify the time when the change occurs as a percentage, or via the keywords "from" and "to", which are equivalent to 0% and 100%.
0% is the start time of the animation, 100% is the end time of the animation. For best browser support we should always define 0% and 100% selectors. Here 0% is one frame, 50% is one frame, and 100% is also one frame.
Finally, use the animation properties to control the appearance of the animation and bind the animation to the selector
animationname required. Defines the name of the animation.
keyframes-selector required. Legal values for the percentage of animation duration: 0-100% from (same as 0%) to (same as 100%)
css-styles required. One or more legal CSS style properties
For example:
@keyframesname{0%{top:0px;left:0px;background:red;}25%{top:0px;left:100px;background:blue;}50%{top:100px;le ft:100px;background:yellow;}75%{top:100px;left:0px;background:green;}100%{top:0px;left:0px;background:red;}}1. animation-name attribute: Set the animation name that needs to be bound to the element.
The animation-name attribute is used to bind the animation to the specified HTML element. The optional values of the attribute are as follows:
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left:350px;}50%{top:200px;left:350px ;}75%{top:200px;left:0px;}100%{top:0px;left :0px;}}div{width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position:relative;animation-name:ball;}</style></head><body><div ></div></body></html>Running results:
Note: In order for the animation to play successfully, you also need to define the animation-duration attribute. Otherwise, the animation will not play because the default value of the animation-duration attribute is 0.
2. animation-duration attribute: Defines how many seconds or milliseconds it takes for the animation to complete a cycle.
● time: Specify the time it takes for the animation to complete. The default value is 0, which means no animation effect.
<!DOCTYPEhtml><html><head><style>@keyframesball{0%{top:0px;left:0px;}25%{top:0px;left :350px;}50%{top:200px;left:350px;}75%{top:200px;left:0px;}100%{top:0px;left:0px;}}div{ width:100px;height:100px;border-radius:50%;border:3pxsolidblack;position:relative;animation-name:ball;animation-duration:2s;}</style></head><body><div> </div></body></html>3. animation-timing-function: The mathematical function used is called cubic Bezier curve and speed curve. Using this function, you can use your own value, or use one of the predefined values.
●linear: The speed of the animation is the same from beginning to end;
●ease: Default. The animation starts low, then speeds up, and slows down before ending;
●ease-in: The animation starts at a low speed;
●ease-out: The animation ends at a low speed;
●ease-in-out: The animation starts and ends at a low speed;
●cubic-bezier (n,n,n,n): Use the cubic-bezier() function to define the playback speed of the animation. The value range of the parameter is a value between 0 and 1.
4. animation-delay attribute: defines when the animation starts.
●time: optional. Defines the time, in seconds or milliseconds, to wait before the animation starts. The default value is 0.
Note: The unit can be seconds (s) or milliseconds (ms).
5. animation-iteration-count attribute: Defines how many times the animation should be played.
Optional values for the attribute are as follows:
6. animation-direction attribute: Defines whether to play the animation in reverse in a loop.
●normal: default value. The animation plays normally;
●reverse: animation plays in reverse;
●Alternate: The animation plays forward in odd numbers (1, 2, 5...) and in reverse in even numbers (2, 4, 6...);
●alternate-reverse: The animation plays in the reverse direction at odd-numbered times (1, 3, 5...) and in the forward direction at even-numbered times (2, 4, 6...).
7. animation-fill-mode attribute: Specifies the style to be applied to the element when the animation does not play (when the animation is completed, or when the animation has a delay before starting to play).
Note: By default, CSS animations do not affect an element until the first keyframe has played, and stop affecting the element after the last keyframe has completed. The animation-fill-mode property overrides this behavior.
●none default value. : The animation will not apply any styles to the target element before and after the animation is executed;
●forwards: After the animation ends (determined by animation-iteration-count), the animation will apply this attribute value;
●backwards: The animation will apply the property values defined in the keyframe that started the first iteration of the animation during the animation-delay definition. These are values in the from keyframe (when animation-direction is "normal" or "alternate") or in the to keyframe (when animation-direction is "reverse" or "alternate-reverse");
●Both animations follow the rules of forwards and backwards. That is, the animation expands the animation property in both directions.
8.animation-play-state: Specifies whether the animation is running or paused.
●paused: Specifies to pause the animation;
●running: Specify the running animation.
9. initial: Set the property to its default value.
●initial: keyword is used to set CSS properties to their default values;
●initial: keyword can be used for any CSS attribute on any HTML element.
10. inherit: Inherit attributes from parent elements.
●inherit: keyword specifies that an attribute should inherit its value from the parent element;
●inherit: keyword can be used for any CSS attribute on any HTML element.
animation
The animation attribute is the abbreviation of animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, through The animation attribute can define multiple of the above attributes at the same time. The syntax format is as follows:
animation:animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state;
Each parameter corresponds to each attribute introduced above. If one or more of the values are omitted, the default value corresponding to the attribute will be used.
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>animation</title><style>.box1{width:700px;height:500px;background-color:silver;}. box2{width:100px;height:100px;background-color:#bfa;margin-left:10px;/*animation-name:test;*//*animation-duration:4s;*//*animat ion-timing-function:linear;*//*animation-iteration-count:4;*//*animation-direction:alternate;*//*animation-fill-mode:backwards ;*//*animation-delay:2s;*/animation:test2slinear1s4alternate;}/*Define animation key frames, the name of the key frame is test*/@keyframestest{/*from indicates the starting position of the animation, you can also use 0% to express. */from{margin-left:50px;background-color:orange;}/*to indicates the end position of the animation, which can also be expressed by 100%. */to{margin-left:600px;background-color:yellow;}}/*Control the running of animation*//*.box1:hover.box2{animation-play-state:paused;}*/</style> </head><body><div><div></div></div></body></html>