Css keyframes animation generator

CSS Animation Generator

What is a CSS Animation Generator, and why should I bookmark it?

CSS Animations Generator is a simple tool that you can use to greatly improve an interface’s UX, but it’s important to follow some guidelines and not overdo it unnecessarily, which might deteriorate the user experience on your web things.

Some basic tips to use CSS animations in your web projects:

• Do not animate an element just for the sake of it. Keep in mind that animations should make an intention clear and look meaningful adding to the overall user experience.
• Entrances and exit animations should be used meaningfully like to modals or popups, to orientate what is happening in the interface, clearly signaling that it’s transitioning into a new state.
• Avoid animating large elements on the page as it won’t bring much value to the user and will probably only cause distraction and confusion and the animations will look junky, adding to bad UX (user experience).
• Infinite animations should be avoided as much as possible as they just distract your users from the main purpose and might annoy a good slice of them.
• Check the initial and final state of your elements — use animation-fill-mode to control the states of an element before and after animation. The default value to «animation-fill-mode:» is «both», but you can change it according to your needs.
• Always animate block or inline-block level elements. You can set an element to display: inline-block when animating an inline-level element.

It is recommended to bookmark it on your web browsers to quickly revisit and reuse it when needed for better productivity at work.

Please share these tools with your friends and colleagues. Also, it will be great if you can recommend these tools in your blogs if you have one. Thank You 🙂

How to use this tool?

Follow these simple steps to get the best results with this tool.

Step 1 — Try various animations from the right-side panel categorized according to their meaning and select whatsoever suits your theme for the element.

Step 2 — Copy the CSS by clicking the blue underlined button and apply it to your CSS files by matching up the class selector.

Now, save this tool or bookmark it on your web browser to revisit it quickly when needed. Thank you!

webdevpuneet.com © 2021 | hosted by Bluehost (web hosting)

Источник

Keyframe Animation

CSS animations allow you to gradually change an element from one style to another. Animations consist of two parts: 1) a style describing the CSS animation and 2) a set of keyframes that mark the start and end states of the animation’s style. With some creativity, many animations can be done entirely in CSS. without any JavaScript!

• Simple to use and require no JavaScript knowledge.
• Much better performance, even under moderate system load.
• Allowing the browser to control the animation lets it optimize performance. For example, minimizing update frequency or pausing the animations running in tabs that aren’t open.

@keyframes

• If your animation runs smoothly from the start to the end, you can use the from and to values.
• If your animation varies from start to finish, like a bounce effect, use a percentage value (this is the value type our generator uses).

animation property

animation: name duration timing-function delay iteration-count direction fill-mode

name

duration

Total length of time that the animation takes to complete one cycle.

timing-function

How an animation progresses through the duration of each cycle.

delay

Delay between the time the element is loaded and the beginning of the animation.

iteration-count

Number of times the animation will repeat, or infinite for looping animations.

direction

Whether or not the animation should alternate directions through the sequence or reset to the starting point.

fill-mode

How an animation applies styles to its target before and after its execution.

Источник

Online Tool CSS3 Animation Generator

In this chapter you will learn about the following properties:

• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
• animation

Browser Specific Prefixes

Some older browsers need specific prefixes (-webkit-) to understand the animation properties

What are CSS Animations?

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times you want.

To use CSS animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

The @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

Related Tools

• CSS Beautify
• CSS Box Shadow
• CSS Border Radius
• CSS Transition
• CSS Transform
• CSS3 Text Rotate
• CSS Text Shadow
• CSS Gradient
• css Minify
• SCSS To CSS
• LESS To CSS
• SASS To CSS
• CSS To SASS
• CSS To SCSS
• CSS To LESS
• CSS Validator
• Stylus To CSS
• Stylus To SCSS
• Stylus To SASS
• Stylus To Less
• CSS To Stylus
• SCSS To Stylus
• SASS To Stylus
• CSS Clip Path Generator
• CSS Column Generator
• CSS Cubic Bezier Generator
• CSS3 Flip Switch
• CSS Flexbox Generator
• CSS Glitch Text Effect
• CSS Loader Generator
• CSS Scrollbar Generator
• CSS Filter Generator
• Style Input Range
• CSS3 Menu Generator
• CSS3 RGBA Generator
• CSS Ribbon Generator
• CSS Ribbon Banner Generator
• CSS Text Gradient Generator
• CSS Tooltip Generator
• CSS Triangle Generator
• CSS3 Button Generator

Top Tools

New Tools

Источник

Css keyframes animation generator

@-webkit-keyframes slideOutDown < 0% < -webkit-transform: translateY(0); transform: translateY(0); >100% < visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); >> @keyframes slideOutDown < 0% < -webkit-transform: translateY(0); transform: translateY(0); >100% < visibility: hidden; -webkit-transform: translateY(100%); transform: translateY(100%); >> .slideOutDown
@-webkit-keyframes slideOutRight < 0% < -webkit-transform: translateX(0); transform: translateX(0); >100% < visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); >> @keyframes slideOutRight < 0% < -webkit-transform: translateX(0); transform: translateX(0); >100% < visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); >> .slideOutRight
@-webkit-keyframes slideOutLeft < 0% < -webkit-transform: translateX(0); transform: translateX(0); >100% < visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); >> @keyframes slideOutLeft < 0% < -webkit-transform: translateX(0); transform: translateX(0); >100% < visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); >> .slideOutLeft
@-webkit-keyframes slideOutUp < 0% < -webkit-transform: translateY(0); transform: translateY(0); >100% < visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); >> @keyframes slideOutUp < 0% < -webkit-transform: translateY(0); transform: translateY(0); >100% < visibility: hidden; -webkit-transform: translateY(-100%); transform: translateY(-100%); >> .slideOutUp
@-webkit-keyframes slideInDown < 0% < -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: visible; >100% < -webkit-transform: translateY(0); transform: translateY(0); >> @keyframes slideInDown < 0% < -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: visible; >100% < -webkit-transform: translateY(0); transform: translateY(0); >> .slideInDown
@-webkit-keyframes slideInLeft < 0% < -webkit-transform: translateX(-100%); transform: translateX(-100%); visibility: visible; >100% < -webkit-transform: translateX(0); transform: translateX(0); >> @keyframes slideInLeft < 0% < -webkit-transform: translateX(-100%); transform: translateX(-100%); visibility: visible; >100% < -webkit-transform: translateX(0); transform: translateX(0); >> .slideInLeft
@-webkit-keyframes slideInRight < 0% < -webkit-transform: translateX(100%); transform: translateX(100%); visibility: visible; >100% < -webkit-transform: translateX(0); transform: translateX(0); >> @keyframes slideInRight < 0% < -webkit-transform: translateX(100%); transform: translateX(100%); visibility: visible; >100% < -webkit-transform: translateX(0); transform: translateX(0); >> .slideInRight
@-webkit-keyframes slideInUp < 0% < -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; >100% < -webkit-transform: translateY(0); transform: translateY(0); >> @keyframes slideInUp < 0% < -webkit-transform: translateY(100%); transform: translateY(100%); visibility: visible; >100% < -webkit-transform: translateY(0); transform: translateY(0); >> .slideInUp
@-webkit-keyframes fadeIn < 0% 100% > @keyframes fadeIn < 0% 100% > .fadeIn
@-webkit-keyframes fadeInDown < 0% < opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> @keyframes fadeInDown < 0% < opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> .fadeInDown
@-webkit-keyframes fadeInDownBig < 0% < opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> @keyframes fadeInDownBig < 0% < opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> .fadeInDownBig
@-webkit-keyframes fadeInLeft < 0% < opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> @keyframes fadeInLeft < 0% < opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> .fadeInLeft
@-webkit-keyframes fadeInLeftBig < 0% < opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> @keyframes fadeInLeftBig < 0% < opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> .fadeInLeftBig
@-webkit-keyframes fadeInRight < 0% < opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> @keyframes fadeInRight < 0% < opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> .fadeInRight
@-webkit-keyframes fadeInRightBig < 0% < opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> @keyframes fadeInRightBig < 0% < opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> .fadeInRightBig
@-webkit-keyframes fadeInUp < 0% < opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> @keyframes fadeInUp < 0% < opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> .fadeInUp
@-webkit-keyframes fadeInUpBig < 0% < opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> @keyframes fadeInUpBig < 0% < opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); >100% < opacity: 1; -webkit-transform: none; transform: none; >> .fadeInUpBig
@-webkit-keyframes fadeOut < 0% 100% > @keyframes fadeOut < 0% 100% > .fadeOut
@-webkit-keyframes fadeOutDown < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); >> @keyframes fadeOutDown < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); >> .fadeOutDown
@-webkit-keyframes fadeOutDownBig < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); >> @keyframes fadeOutDownBig < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); >> .fadeOutDownBig
@-webkit-keyframes fadeOutLeft < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); >> @keyframes fadeOutLeft < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); >> .fadeOutLeft
@-webkit-keyframes fadeOutLeftBig < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); >> @keyframes fadeOutLeftBig < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); >> .fadeOutLeftBig
@-webkit-keyframes fadeOutRight < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); >> @keyframes fadeOutRight < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); >> .fadeOutRight
@-webkit-keyframes fadeOutRightBig < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); >> @keyframes fadeOutRightBig < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); >> .fadeOutRightBig
@-webkit-keyframes fadeOutUp < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); >> @keyframes fadeOutUp < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); >> .fadeOutUp
@-webkit-keyframes fadeOutUpBig < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); >> @keyframes fadeOutUpBig < 0% < opacity: 1; >100% < opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); >> .fadeOutUpBig
@-webkit-keyframes zoomIn < 0% < opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); >50% < opacity: 1; >> @keyframes zoomIn < 0% < opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); >50% < opacity: 1; >> .zoomIn
@-webkit-keyframes zoomInUp < 0% < opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); >60% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); >> @keyframes zoomInUp < 0% < opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); >60% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); >> .zoomInUp
@-webkit-keyframes zoomInDown < 0% < opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); >60% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); >> @keyframes zoomInDown < 0% < opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); >60% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); >> .zoomInDown
@-webkit-keyframes zoomInRight < 0% < opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); >60% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); >> @keyframes zoomInRight < 0% < opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); >60% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); >> .zoomInRight
@-webkit-keyframes zoomInLeft < 0% < opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); >60% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); >> @keyframes zoomInLeft < 0% < opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); >60% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); >> .zoomInLeft
@-webkit-keyframes zoomOut < 0% < opacity: 1; >50% < opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); >100% < opacity: 0; >> @keyframes zoomOut < 0% < opacity: 1; >50% < opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); >100% < opacity: 0; >> .zoomOut
@-webkit-keyframes zoomOutUp < 40% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); >100% < opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); >> @keyframes zoomOutUp < 40% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); >100% < opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); >> .zoomOutUp
@-webkit-keyframes zoomOutDown < 40% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); >100% < opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); >> @keyframes zoomOutDown < 40% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); >100% < opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); >> .zoomOutDown
@-webkit-keyframes zoomOutRight < 40% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); >100% < opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; >> @keyframes zoomOutRight < 40% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); >100% < opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; >> .zoomOutRight
@-webkit-keyframes zoomOutLeft < 40% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); >100% < opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; >> @keyframes zoomOutLeft < 40% < opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); >100% < opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; >> .zoomOutLeft
@-webkit-keyframes bounce < 0%, 20%, 53%, 80%, 100% < -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >40%, 43% < -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); >70% < -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); >90% < -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); >> @keyframes bounce < 0%, 20%, 53%, 80%, 100% < -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >40%, 43% < -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); >70% < -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); >90% < -webkit-transform: translate3d(0,-4px,0); transform: translate3d(0,-4px,0); >> .bounce
@-webkit-keyframes bounceIn < 0%, 20%, 40%, 60%, 80%, 100% < -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); >0% < opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); >20% < -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); >40% < -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); >60% < opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); >80% < -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); >100% < opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >> @keyframes bounceIn < 0%, 20%, 40%, 60%, 80%, 100% < -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); >0% < opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); >20% < -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); >40% < -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); >60% < opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); >80% < -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); >100% < opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >> .bounceIn
@-webkit-keyframes bounceInDown < 0%, 60%, 75%, 90%, 100% < -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); >0% < opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); >60% < opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); >75% < -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); >90% < -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); >100% < -webkit-transform: none; transform: none; >> @keyframes bounceInDown < 0%, 60%, 75%, 90%, 100% < -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); >0% < opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); >60% < opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); >75% < -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); >90% < -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); >100% < -webkit-transform: none; transform: none; >> .bounceInDown
@-webkit-keyframes bounceInLeft < 0%, 60%, 75%, 90%, 100% < -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); >0% < opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); >60% < opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); >75% < -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); >90% < -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); >100% < -webkit-transform: none; transform: none; >> @keyframes bounceInLeft < 0%, 60%, 75%, 90%, 100% < -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); >0% < opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); >60% < opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); >75% < -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); >90% < -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); >100% < -webkit-transform: none; transform: none; >> .bounceInLeft
@-webkit-keyframes bounceInRight < 0%, 60%, 75%, 90%, 100% < -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); >0% < opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); >60% < opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); >75% < -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); >90% < -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); >100% < -webkit-transform: none; transform: none; >> @keyframes bounceInRight < 0%, 60%, 75%, 90%, 100% < -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); >0% < opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); >60% < opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); >75% < -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); >90% < -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); >100% < -webkit-transform: none; transform: none; >> .bounceInRight
@-webkit-keyframes bounceInUp < 0%, 60%, 75%, 90%, 100% < -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); >0% < opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); >60% < opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); >75% < -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); >90% < -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); >100% < -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); >> @keyframes bounceInUp < 0%, 60%, 75%, 90%, 100% < -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); >0% < opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); >60% < opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); >75% < -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); >90% < -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); >100% < -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); >> .bounceInUp
@-webkit-keyframes bounceOut < 20% < -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); >50%, 55% < opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); >100% < opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); >> @keyframes bounceOut < 20% < -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); >50%, 55% < opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); >100% < opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); >> .bounceOut
@-webkit-keyframes bounceOutDown < 20% < -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); >40%, 45% < opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); >100% < opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); >> @keyframes bounceOutDown < 20% < -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); >40%, 45% < opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); >100% < opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); >> .bounceOutDown
@-webkit-keyframes bounceOutLeft < 20% < opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); >100% < opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); >> @keyframes bounceOutLeft < 20% < opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); >100% < opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); >> .bounceOutLeft
@-webkit-keyframes bounceOutRight < 20% < opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); >100% < opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); >> @keyframes bounceOutRight < 20% < opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); >100% < opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); >> .bounceOutRight
@-webkit-keyframes bounceOutUp < 20% < -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); >40%, 45% < opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); >100% < opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); >> @keyframes bounceOutUp < 20% < -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); >40%, 45% < opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); >100% < opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); >> .bounceOutUp
@-webkit-keyframes flip < 0% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; >40% < -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; >50% < -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; >80% < -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; >100% < -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; >> @keyframes flip < 0% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; >40% < -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; >50% < -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; >80% < -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; >100% < -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; >> .animated.flip
@-webkit-keyframes flipInX < 0% < -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; >40% < -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; >60% < -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; >80% < -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); >100% < -webkit-transform: perspective(400px); transform: perspective(400px); >> @keyframes flipInX < 0% < -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; >40% < -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; >60% < -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; >80% < -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); >100% < -webkit-transform: perspective(400px); transform: perspective(400px); >> .flipInX
@-webkit-keyframes flipInY < 0% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; >40% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; >60% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; >80% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); >100% < -webkit-transform: perspective(400px); transform: perspective(400px); >> @keyframes flipInY < 0% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; >40% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; >60% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; >80% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); >100% < -webkit-transform: perspective(400px); transform: perspective(400px); >> .flipInY
@-webkit-keyframes flipOutX < 0% < -webkit-transform: perspective(400px); transform: perspective(400px); >30% < -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; >100% < -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; >> @keyframes flipOutX < 0% < -webkit-transform: perspective(400px); transform: perspective(400px); >30% < -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; >100% < -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; >> .flipOutX
@-webkit-keyframes flipOutY < 0% < -webkit-transform: perspective(400px); transform: perspective(400px); >30% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; >100% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; >> @keyframes flipOutY < 0% < -webkit-transform: perspective(400px); transform: perspective(400px); >30% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; >100% < -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; >> .flipOutY
@-webkit-keyframes rotateIn < 0% < -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; >100% < -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; >> @keyframes rotateIn < 0% < -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; >100% < -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; >> .rotateIn
@-webkit-keyframes rotateInDownLeft < 0% < -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; >100% < -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; >> @keyframes rotateInDownLeft < 0% < -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; >100% < -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; >> .rotateInDownLeft
@-webkit-keyframes rotateInDownRight < 0% < -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; >100% < -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; >> @keyframes rotateInDownRight < 0% < -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; >100% < -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; >> .rotateInDownRight
@-webkit-keyframes rotateInUpLeft < 0% < -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; >100% < -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; >> @keyframes rotateInUpLeft < 0% < -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; >100% < -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; >> .rotateInUpLeft
@-webkit-keyframes rotateInUpRight < 0% < -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; >100% < -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; >> @keyframes rotateInUpRight < 0% < -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; >100% < -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; >> .rotateInUpRight
@-webkit-keyframes rotateOut < 0% < -webkit-transform-origin: center; transform-origin: center; opacity: 1; >100% < -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; >> @keyframes rotateOut < 0% < -webkit-transform-origin: center; transform-origin: center; opacity: 1; >100% < -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; >> .rotateOut
@-webkit-keyframes rotateOutDownLeft < 0% < -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; >100% < -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; >> @keyframes rotateOutDownLeft < 0% < -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; >100% < -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; >> .rotateOutDownLeft
@-webkit-keyframes rotateOutDownRight < 0% < -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; >100% < -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; >> @keyframes rotateOutDownRight < 0% < -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; >100% < -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; >> .rotateOutDownRight
@-webkit-keyframes rotateOutUpLeft < 0% < -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; >100% < -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; >> @keyframes rotateOutUpLeft < 0% < -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; >100% < -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; >> .rotateOutUpLeft
@-webkit-keyframes rotateOutUpRight < 0% < -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; >100% < -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; >> @keyframes rotateOutUpRight < 0% < -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; >100% < -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; >> .rotateOutUpRight
@-webkit-keyframes flash < 0%, 50%, 100% < opacity: 1; >25%, 75% < opacity: 0; >> @keyframes flash < 0%, 50%, 100% < opacity: 1; >25%, 75% < opacity: 0; >> .flash
@-webkit-keyframes pulse < 0% < -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >50% < -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); >100% < -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >> @keyframes pulse < 0% < -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >50% < -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); >100% < -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >> .pulse
@-webkit-keyframes rubberBand < 0% < -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >30% < -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); >40% < -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); >50% < -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); >65% < -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); >75% < -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); >100% < -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >> @keyframes rubberBand < 0% < -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >30% < -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); >40% < -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); >50% < -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); >65% < -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); >75% < -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); >100% < -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >> .rubberBand
@-webkit-keyframes shake < 0%, 100% < -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); >10%, 30%, 50%, 70%, 90% < -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); >20%, 40%, 60%, 80% < -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); >> @keyframes shake < 0%, 100% < -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); >10%, 30%, 50%, 70%, 90% < -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); >20%, 40%, 60%, 80% < -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); >> .shake
@-webkit-keyframes swing < 20% < -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); >40% < -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); >60% < -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); >80% < -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); >100% < -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); >> @keyframes swing < 20% < -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); >40% < -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); >60% < -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); >80% < -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); >100% < -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); >> .swing
@-webkit-keyframes tada < 0% < -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >10%, 20% < -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); >30%, 50%, 70%, 90% < -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); >40%, 60%, 80% < -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); >100% < -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >> @keyframes tada < 0% < -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >10%, 20% < -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); >30%, 50%, 70%, 90% < -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); >40%, 60%, 80% < -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); >100% < -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); >> .tada
@-webkit-keyframes wobble < 0% < -webkit-transform: none; transform: none; >15% < -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); >30% < -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); >45% < -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); >60% < -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); >75% < -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); >100% < -webkit-transform: none; transform: none; >> @keyframes wobble < 0% < -webkit-transform: none; transform: none; >15% < -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); >30% < -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); >45% < -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); >60% < -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); >75% < -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); >100% < -webkit-transform: none; transform: none; >> .wobble
@-webkit-keyframes lightSpeedIn < 0% < -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; >60% < -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; >80% < -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; >100% < -webkit-transform: none; transform: none; opacity: 1; >> @keyframes lightSpeedIn < 0% < -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; >60% < -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; >80% < -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; >100% < -webkit-transform: none; transform: none; opacity: 1; >> .lightSpeedIn
@-webkit-keyframes lightSpeedOut < 0% < opacity: 1; >100% < -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; >> @keyframes lightSpeedOut < 0% < opacity: 1; >100% < -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; >> .lightSpeedOut

Источник