Self-organized CSS3 animation library with download link

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.