Animation Call SyntaxAnimation:bouncein 0.3s ease 0.2s 1 both; interpret parameters in order: Animation name such as: Bouncein period of time as: 0.3s speed curve such as: ease
| |
description |
| linear |
The animation is the same speed from beginning to end. |
| ease |
default. The animation starts at low speed, then accelerates and slows down before it ends. |
| ease-in |
animation starts at low speed. |
| ease-out |
The animation ends at low speed. |
| ease-in-out |
animation starts and ends at low speed. |
| Cubic-bezier (N,n,n,n) |
Its own value in the Cubic-bezier function. The possible values are numbers from 0 to 1. |
Animation start time such as: 0.2s played the number of times: 1 If you want to keep looping, setInfiniteWhether the animation is visible before or after it is played, such as: both
| Value |
Describe |
| none |
|
| forwards |
When the animation is complete, keep the last property value (defined in the last Keyframe). |
| backwards |
|
| both |
The forward and backward fill modes are applied. |
Compatibility settings animation-webkit-animation:bounceindown 0.3s ease 0.2s 1 both;-moz-animation:bounceindown 0.3s ease 0.2s 1 both;- Ms-animation:bounceindown 0.3s Ease 0.2s 1 both;-o-animation:bounceindown 0.3s ease 0.2s 1 Both;animation:bounceindown 0. 3s ease 0.2s 1 both; The animation effect in this CSS Vanishin center zooms out after the blur becomes clear after the Vanishout center zooms out and disappears twisterinup from the right spiral to zoom in Slideup up move Slidedown Move Down puffout Center zoom clear change particles disappear puffin from outward center twisterindown from the left side spiral in to enlargerollIn tumbling in from the left .Lightspeedin from the right speed of light into the lightspeedout speed of light go out Fadein in place fadeout in situ fade fadeinleft from the left, fade in fadeinright from the right, fade in Fadeindown from above , fade in Fadeinup from below, fade in Fadeoutdown down, fade out fadeoutleft left, fade fadeoutright to the right, fade fadeoutup up, fade out swing and shake wobble Large sway around Rotatein rotation 360 degrees Flip ZoomIn Center zoom in Zoomout to center zoomed out Bouncein Zoom out from center pop-up show Bounceinleft bounce Bounceinright from left Bounce from the right into the bounceinup up into the bounceindown bounce down into the Bounceout center pop-up disappear bounceoutdown bounce away bounceoutleft go left bounce bounceoutright Bounceoutup to the right to disappear. Rollout to the right to roll out of the rubberband in-situ elastic bounce heartbeat in place like a heartbeat. Flipouty y-axis flip disappears Flipinx x-axis Flip show Flipiny Y-axis Flip shows Flipoutx x-axis rollover disappears Tada in-situ jitter jello in-situ oblique jitter flash in situ blink pulse in situ slightly enlarged after reducing sharp blur to clearly show scaleup in situ zoom scaledown in place Blur In-situ Blur maintains fuzzy state start flashes disappear rightflip flashes to the right disappear shake in situ jitter hinge peeling boinginup forward into the Holeout zoom out the last attachment: Download connection
Self-organized CSS3 animation library with download link
