The animation property is a shorthand property for setting six animation properties:
Animation-name animation-duration animation-timing-function animation-delay Animation-iteration-count animation-direction
Default value: None 0 ease 0 1 Normal
Note: Always specify the Animation-duration property, otherwise the duration is 0 and the animation will not play.
Grammar
Animation:name Duration timing-function delay iteration-count direction;
ANIMATION-NAME Specifies the keyframe name that needs to be bound to the selector:
Animation-duration specifies the time, in seconds or milliseconds, that the animation will take to complete.
animation-timing-function Specifies the speed curve of the animation.
ANIMATION-DELAY specifies the delay before the animation begins.
ANIMATION-ITERATION-COUNT specifies the number of times the animation should play. (Value: n times, infinite Infinite loop)
Animation-direction Specifies whether the animation should be rotated in reverse.
Summarize:
Based on the above attributes, only the Animation-delay and Animation-iteration-count can be set according to the specific situation.
For example:
P{animation:mymove 5s 5s Infinite;-webkit-animation:mymove 5s 5s infinite;/* Safari and Chrome */}Examples of scenarios:
<!doctype html>Gross position animation is set to 4 seconds, then the first 75% is 3 seconds have not changed (0-75%), after 25% is 1 seconds to do animation.
"Recommended"
1. Detailed description of the Animation-direction attribute in CSS3
2.8 large properties of the CSS3 animation (Animation) that must be mastered
3. Share a listener CSS3 animation (animation) End Event instance
4. Explain the two types of suspension in CSS3 (transition, 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
