Website Structure

This commit is contained in:
supalerk-ar66 2026-01-13 10:46:40 +07:00
parent 62812f2090
commit 71f0676a62
22365 changed files with 4265753 additions and 791 deletions

21
Frontend-Learner/node_modules/@quasar/extras/LICENSE generated vendored Normal file
View file

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2017-present Razvan Stoenescu
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

164
Frontend-Learner/node_modules/@quasar/extras/README.md generated vendored Normal file
View file

@ -0,0 +1,164 @@
![Quasar Framework logo](https://cdn.quasar.dev/logo-v2/header.png)
## Quasar Framework Extras Package
> Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!
<img src="https://img.shields.io/npm/v/%40quasar/extras.svg?label=@quasar/extras">
[![Join the chat at https://chat.quasar.dev](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://chat.quasar.dev)
<a href="https://forum.quasar.dev" target="_blank"><img src="https://img.shields.io/badge/community-forum-brightgreen.svg"></a>
[![https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg](https://good-labs.github.io/greater-good-affirmation/assets/images/badge.svg)](https://good-labs.github.io/greater-good-affirmation)
## Why?
Why this package? Because it strips down unnecessary package files (so faster download times), all in one place, tested and ready to use with Quasar. One other reason is that the material icons npm package sometimes fails to be downloaded by NPM.
## Contents
Please make sure you have latest `@quasar/extras` npm package version installed into your project folder in order for you to benefit from everything below.
### Webfonts
| Vendor | Version | quasar.conf.js extras name | Description | Notes | License |
| ------------------------------------------------------------------------------- | -------- | --------------------------- | ---------------------------------------------------- | ------------------------------ | -------------------------------------------- |
| Roboto Font | CDN v47 | `roboto-font` | Recommended font along Material theme | | [License](roboto-font/LICENSE) |
| Roboto Font Latin Extended | CDN v47 | `roboto-font-latin-ext` | Recommended font along Material theme | | [License](roboto-font-latin-ext/LICENSE) |
| [Material Icons](https://material.io/tools/icons/?style=baseline) (Google) | CDN v143 | `material-icons` | Material icons font | Requires: @quasar/extras 1.2+ | [License](material-icons/LICENSE) |
| [Material Icons Outlined](https://material.io/tools/icons/?style=outline) | CDN v109 | `material-icons-outlined` | Material icons outlined font | Requires: @quasar/extras 1.2+ | [License](material-icons-outlined/LICENSE) |
| [Material Icons Round](https://material.io/tools/icons/?style=round) | CDN v108 | `material-icons-round` | Material icons round font | Requires: @quasar/extras 1.2+ | [License](material-icons-round/LICENSE) |
| [Material Icons Sharp](https://material.io/tools/icons/?style=sharp) | CDN v109 | `material-icons-sharp` | Material icons sharp font | Requires: @quasar/extras 1.2+ | [License](material-icons-sharp/LICENSE) |
| [Material Symbols Outlined](https://fonts.google.com/icons?icon.style=Outlined) | CDN v244 | `material-symbols-outlined` | Material symbols outlined font | Requires: @quasar/extras 1.14+ | [License](material-symbols-outlined/LICENSE) |
| [Material Symbols Rounded](https://fonts.google.com/icons?icon.style=Rounded) | CDN v245 | `material-symbols-rounded` | Material symbols rounded font | Requires: @quasar/extras 1.14+ | [License](material-symbols-round/LICENSE) |
| [Material Symbols Sharp](https://fonts.google.com/icons?icon.style=Sharp) | CDN v241 | `material-symbols-sharp` | Material symbols sharp font | Requires: @quasar/extras 1.14+ | [License](material-symbols-sharp/LICENSE) |
| [MDI v7](https://materialdesignicons.com/) (Material Design Icons) | 7.4.47 | `mdi-v7` | Extended Material Design icons font | Requires: @quasar/extras 1.15+ | [License](mdi-v7/LICENSE) |
| MDI v6 (Material Design Icons) | 6.9.96 | `mdi-v6` | Extended Material Design icons font | | [License](mdi-v6/LICENSE) |
| MDI v5 (Material Design Icons) | 5.9.55 | `mdi-v5` | Extended Material Design icons font | | [License](mdi-v5/LICENSE) |
| MDI v4 (Material Design Icons) | 4.9.95 | `mdi-v4` | Extended Material Design icons font | | [License](mdi-v4/license.md) |
| MDI v3 (Material Design Icons) | 3.6.95 | `mdi-v3` | Extended Material Design icons font | | [License](mdi-v3/LICENSE) |
| [Font Awesome v6](https://fontawesome.com/icons) | 6.7.2 | `fontawesome-v6` | Fontawesome icons font | Requires: @quasar/extras 1.13+ | [License](fontawesome-v6/LICENSE.txt) |
| Font Awesome v5 | 5.15.4 | `fontawesome-v5` | Fontawesome icons font | | [License](fontawesome-v5/LICENSE.txt) |
| [Ionicons](https://ionicons.com/v4) | 4.6.3 | `ionicons-v4` | Ionicons font | | [License](ionicons-v4/LICENSE) |
| [Eva Icons](https://akveo.github.io/eva-icons) | 1.1.3 | `eva-icons` | Eva Icons font | | [License](eva-icons/LICENSE) |
| [Themify Icons](https://themify.me/themify-icons) | 1.0.1 | `themify` | Themify Icons font | | [License](themify/LICENSE) |
| [Line Awesome](https://icons8.com/line-awesome) | 1.3.0 | `line-awesome` | Line Awesome font | Requires: @quasar/extras 1.5+ | [License](line-awesome/LICENSE.md) |
| [Bootstrap Icons](https://icons.getbootstrap.com/) | 1.13.1 | `bootstrap-icons` | Bootstrap Icons font | Requires: @quasar/extras 1.10+ | [License](bootstrap-icons/LICENSE.md) |
| [Animate.css](https://animate.style/) | 4.1.1 | Use `animations` prop | Bundle of animations you can use in your website/app | | [License](animate/LICENSE) |
> Install one of MDI v6, MDI v5, MDI v4 or MDI v3, but never together at the same time.
> Note that ionicons v5+ no longer comes with a webfont.
### SVG
> Quasar v1.7+ required for svg Quasar Icon Sets.
| Vendor | Version | Quasar IconSet name | Import Icons from | Notes | License |
| ---------------------------------------------------------------------------------------- | -------- | ------------------------------- | ------------------------------------------ | --------------------------------------------------- | -------------------------------------------- |
| [Material Icons](https://material.io/tools/icons/?style=baseline) (Google) | CDN v143 | `svg-material-icons` | `@quasar/extras/material-icons` | | [License](material-icons/LICENSE) |
| [Material Icons Outlined](https://material.io/tools/icons/?style=outlined) (Google) | CDN v109 | `svg-material-icons-outlined` | `@quasar/extras/material-icons-outlined` | Requires: @quasar/extras 1.9+ | [License](material-icons-outlined/LICENSE) |
| [Material Icons Round](https://material.io/tools/icons/?style=round) (Google) | CDN v108 | `svg-material-icons-round` | `@quasar/extras/material-icons-round` | Requires: @quasar/extras 1.9+ | [License](material-icons-round/LICENSE) |
| [Material Icons Sharp](https://material.io/tools/icons/?style=sharp) (Google) | CDN v109 | `svg-material-icons-sharp` | `@quasar/extras/material-icons-sharp` | Requires: @quasar/extras 1.9+ | [License](material-icons-sharp/LICENSE) |
| [Material Symbols Outlined](https://fonts.google.com/icons?icon.style=Outlined) (Google) | CDN v244 | `svg-material-symbols-outlined` | `@quasar/extras/material-symbols-outlined` | Requires: @quasar/extras 1.14+ | [License](material-symbols-outlined/LICENSE) |
| [Material Symbols Rounded](https://fonts.google.com/icons?icon.style=Rounded) (Google) | CDN v245 | `svg-material-symbols-rounded` | `@quasar/extras/material-symbols-rounded` | Requires: @quasar/extras 1.14+ | [License](material-symbols-round/LICENSE) |
| [Material Symbols Sharp](https://fonts.google.com/icons?icon.style=Sharp) (Google) | CDN v241 | `svg-material-symbols-sharp` | `@quasar/extras/material-symbols-sharp` | Requires: @quasar/extras 1.14+ | [License](material-symbols-sharp/LICENSE) |
| [MDI v7](https://materialdesignicons.com/) (Material Design Icons) | 7.4.47 | `svg-mdi-v7` | `@quasar/extras/mdi-v7` | | [License](mdi-v7/LICENSE) |
| MDI v6 (Material Design Icons) | 6.9.96 | `svg-mdi-v6` | `@quasar/extras/mdi-v6` | | [License](mdi-v6/LICENSE) |
| MDI v5 (Material Design Icons) | 5.9.55 | `svg-mdi-v5` | `@quasar/extras/mdi-v5` | | [License](mdi-v5/LICENSE) |
| MDI v4 (Material Design Icons) | 4.9.95 | `svg-mdi-v4` | `@quasar/extras/mdi-v4` | | [License](mdi-v4/license.md) |
| [Font Awesome v6](https://fontawesome.com/icons) | 6.7.2 | `svg-fontawesome-v6` | `@quasar/extras/fontawesome-v6` | Requires: @quasar/extras 1.13+ | [License](fontawesome-v5/LICENSE.txt) |
| Font Awesome v5 | 5.15.4 | `svg-fontawesome-v5` | `@quasar/extras/fontawesome-v5` | | [License](fontawesome-v5/LICENSE.txt) |
| [Ionicons v8](https://ionicons.com/) | 8.0.8 | `svg-ionicons-v8` | `@quasar/extras/ionicons-v8` | Requires: @quasar/extras 1.18+ | [Icon License](ionicons-v8/LICENSE) |
| Ionicons v7 | 7.4.0 | `svg-ionicons-v7` | `@quasar/extras/ionicons-v7` | Requires: @quasar/extras 1.16+ | [Icon License](ionicons-v7/LICENSE) |
| Ionicons v6 | 6.1.3 | `svg-ionicons-v6` | `@quasar/extras/ionicons-v6` | Requires: @quasar/extras 1.12+ | [Icon License](ionicons-v6/LICENSE) |
| Ionicons v5 | 5.5.4 | `svg-ionicons-v5` | `@quasar/extras/ionicons-v5` | Requires: @quasar/extras 1.7+ | [Icon License](ionicons-v5/LICENSE) |
| Ionicons v4 | 4.6.3 | `svg-ionicons-v4` | `@quasar/extras/ionicons-v4` | No icon font (woof) files for Ionicons since v4.6.3 | [Icon License](ionicons-v4/LICENSE) |
| [Eva Icons](https://akveo.github.io/eva-icons) | 1.1.3 | `svg-eva-icons` | `@quasar/extras/eva-icons` | | [License](eva-icons/LICENSE) |
| [Themify Icons](https://themify.me/themify-icons) | 1.0.1 | `svg-themify` | `@quasar/extras/themify` | | [License](themify/LICENSE) |
| [Line Awesome](https://icons8.com/line-awesome) | 1.3.0 | `svg-line-awesome` | `@quasar/extras/line-awesome` | Requires: @quasar/extras 1.5+ | [License](line-awesome/LICENSE.md) |
| [Bootstrap Icons](https://icons.getbootstrap.com/) | 1.13.1 | `svg-bootstrap-icons` | `@quasar/extras/bootstrap-icons` | Requires: @quasar/extras 1.10+ | [License](bootstrap-icons/LICENSE.md) |
Example:
```html
// some .vue file in devland
<template>
<div>
<q-icon :name="matMenu" />
<q-btn :icon="mdiAbTesting" />
</div>
</template>
<script>
import { matMenu } from '@quasar/extras/material-icons'
import { mdiAbTesting } from '@quasar/extras/mdi-v5'
export default {
// ...
created () {
this.matMenu = matMenu
this.mdiAbTesting = mdiAbTesting
}
}
```
### QIcon cheatsheet
```html
<q-icon name="..." />
```
| Name | Prefix | Examples | Notes | License |
| ----------------------- | ---------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ------- |
| material-icons | _None_ | thumb_up | Notice the underline character instead of dash or space | |
| material-icons-outlined | o\_ | o_thumb_up | Notice the underline character instead of dash or space | |
| material-icons-round | r\_ | r_thumb_up | Notice the underline character instead of dash or space | |
| material-icons-sharp | s\_ | s_thumb_up | Notice the underline character instead of dash or space | |
| ionicons-v4 | ion-, ion-md-, ion-ios-, ion-logo- | ion-heart, ion-logo-npm, ion-md-airplane | Use QIcon instead of `<ion-icon>` component; Logo icons require 'ion-logo-' prefix | |
| fontawesome-v5 | fa[s,r,l,b,d] fa- | "fas fa-ambulance" | QIcon "name" property is same as "class" attribute value in Fontawesome docs examples (where they show `<i>` tags) | |
| mdi-v5 | mdi- | mdi-alert-circle-outline | Notice the use of dash characters | |
| eva-icons | eva- | eva-shield-outline, eva-activity-outline | Notice the use of dash characters | |
| themify | ti- | ti-hand-point-up | Notice the use of dash characters | |
| line-awesome | la[s,r,l,b,d] la- | "las la-atom" | QIcon "name" property is same as "class" attribute value in Line Awesome docs examples (where they show `<i>` tags) | |
| bootstrap-icons | bi- | bi-bug-fill | Notice the use of dash characters | |
### SVG name format
Svg icons will be defined as String with the following syntax:
```
Syntax: "<path>|<viewBox>" or "<path>" (with implicit viewBox of '0 0 24 24')
Examples:
M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z|0 0 24 24
M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z
```
## Supporting Quasar
Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome [backers](https://github.com/quasarframework/quasar/blob/dev/backers.md).
**Please read our manifest on [Why donations are important](https://quasar.dev/why-donate)**. If you'd like to become a donator, check out [Quasar Framework's Donator campaign](https://donate.quasar.dev).
## Documentation
Head on to the Quasar Framework official website: [https://quasar.dev](https://quasar.dev)
## Stay in Touch
For latest releases and announcements, follow on Twitter: [@quasarframework](https://twitter.quasar.dev)
## Chat Support
Ask questions at the official community Discord server: [https://chat.quasar.dev](https://chat.quasar.dev)
## Community Forum
Head on to the official community forum: [https://forum.quasar.dev](https://forum.quasar.dev)
## Semver
Using [semver 2.0](http://semver.org/) notation for '@quasar/extras' package.
## License
All assets included in this repository are exclusive property of their respective owners and licensed under their own respective licenses. Quasar does not take any credit in packages included here.

View file

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2020 Daniel Eden
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

@ -0,0 +1,107 @@
export type generalAnimations =
| 'bounce'
| 'flash'
| 'flip'
| 'headShake'
| 'heartBeat'
| 'hinge'
| 'jello'
| 'pulse'
| 'rubberBand'
| 'shake'
| 'shakeX'
| 'shakeY'
| 'swing'
| 'tada'
| 'wobble'
;
export type inAnimations =
| 'backInDown'
| 'backInLeft'
| 'backInRight'
| 'backInUp'
| 'bounceIn'
| 'bounceInDown'
| 'bounceInLeft'
| 'bounceInRight'
| 'bounceInUp'
| 'fadeIn'
| 'fadeInBottomLeft'
| 'fadeInBottomRight'
| 'fadeInDown'
| 'fadeInDownBig'
| 'fadeInLeft'
| 'fadeInLeftBig'
| 'fadeInRight'
| 'fadeInRightBig'
| 'fadeInTopLeft'
| 'fadeInTopRight'
| 'fadeInUp'
| 'fadeInUpBig'
| 'flipInX'
| 'flipInY'
| 'jackInTheBox'
| 'lightSpeedInLeft'
| 'lightSpeedInRight'
| 'rollIn'
| 'rotateIn'
| 'rotateInDownLeft'
| 'rotateInDownRight'
| 'rotateInUpLeft'
| 'rotateInUpRight'
| 'slideInDown'
| 'slideInLeft'
| 'slideInRight'
| 'slideInUp'
| 'zoomIn'
| 'zoomInDown'
| 'zoomInLeft'
| 'zoomInRight'
| 'zoomInUp'
;
export type outAnimations =
| 'backOutDown'
| 'backOutLeft'
| 'backOutRight'
| 'backOutUp'
| 'bounceOut'
| 'bounceOutDown'
| 'bounceOutLeft'
| 'bounceOutRight'
| 'bounceOutUp'
| 'fadeOut'
| 'fadeOutBottomLeft'
| 'fadeOutBottomRight'
| 'fadeOutDown'
| 'fadeOutDownBig'
| 'fadeOutLeft'
| 'fadeOutLeftBig'
| 'fadeOutRight'
| 'fadeOutRightBig'
| 'fadeOutTopLeft'
| 'fadeOutTopRight'
| 'fadeOutUp'
| 'fadeOutUpBig'
| 'flipOutX'
| 'flipOutY'
| 'lightSpeedOutLeft'
| 'lightSpeedOutRight'
| 'rollOut'
| 'rotateOut'
| 'rotateOutDownLeft'
| 'rotateOutDownRight'
| 'rotateOutUpLeft'
| 'rotateOutUpRight'
| 'slideOutDown'
| 'slideOutLeft'
| 'slideOutRight'
| 'slideOutUp'
| 'zoomOut'
| 'zoomOutDown'
| 'zoomOutLeft'
| 'zoomOutRight'
| 'zoomOutUp'
;

View file

@ -0,0 +1,106 @@
module.exports.generalAnimations = [
'bounce',
'flash',
'flip',
'headShake',
'heartBeat',
'hinge',
'jello',
'pulse',
'rubberBand',
'shake',
'shakeX',
'shakeY',
'swing',
'tada',
'wobble'
]
module.exports.inAnimations = [
'backInDown',
'backInLeft',
'backInRight',
'backInUp',
'bounceIn',
'bounceInDown',
'bounceInLeft',
'bounceInRight',
'bounceInUp',
'fadeIn',
'fadeInBottomLeft',
'fadeInBottomRight',
'fadeInDown',
'fadeInDownBig',
'fadeInLeft',
'fadeInLeftBig',
'fadeInRight',
'fadeInRightBig',
'fadeInTopLeft',
'fadeInTopRight',
'fadeInUp',
'fadeInUpBig',
'flipInX',
'flipInY',
'jackInTheBox',
'lightSpeedInLeft',
'lightSpeedInRight',
'rollIn',
'rotateIn',
'rotateInDownLeft',
'rotateInDownRight',
'rotateInUpLeft',
'rotateInUpRight',
'slideInDown',
'slideInLeft',
'slideInRight',
'slideInUp',
'zoomIn',
'zoomInDown',
'zoomInLeft',
'zoomInRight',
'zoomInUp'
]
module.exports.outAnimations = [
'backOutDown',
'backOutLeft',
'backOutRight',
'backOutUp',
'bounceOut',
'bounceOutDown',
'bounceOutLeft',
'bounceOutRight',
'bounceOutUp',
'fadeOut',
'fadeOutBottomLeft',
'fadeOutBottomRight',
'fadeOutDown',
'fadeOutDownBig',
'fadeOutLeft',
'fadeOutLeftBig',
'fadeOutRight',
'fadeOutRightBig',
'fadeOutTopLeft',
'fadeOutTopRight',
'fadeOutUp',
'fadeOutUpBig',
'flipOutX',
'flipOutY',
'lightSpeedOutLeft',
'lightSpeedOutRight',
'rollOut',
'rotateOut',
'rotateOutDownLeft',
'rotateOutDownRight',
'rotateOutUpLeft',
'rotateOutUpRight',
'slideOutDown',
'slideOutLeft',
'slideOutRight',
'slideOutUp',
'zoomOut',
'zoomOutDown',
'zoomOutLeft',
'zoomOutRight',
'zoomOutUp'
]

View file

@ -0,0 +1,107 @@
export type generalAnimations =
| 'bounce'
| 'flash'
| 'flip'
| 'headShake'
| 'heartBeat'
| 'hinge'
| 'jello'
| 'pulse'
| 'rubberBand'
| 'shake'
| 'shakeX'
| 'shakeY'
| 'swing'
| 'tada'
| 'wobble'
;
export type inAnimations =
| 'backInDown'
| 'backInLeft'
| 'backInRight'
| 'backInUp'
| 'bounceIn'
| 'bounceInDown'
| 'bounceInLeft'
| 'bounceInRight'
| 'bounceInUp'
| 'fadeIn'
| 'fadeInBottomLeft'
| 'fadeInBottomRight'
| 'fadeInDown'
| 'fadeInDownBig'
| 'fadeInLeft'
| 'fadeInLeftBig'
| 'fadeInRight'
| 'fadeInRightBig'
| 'fadeInTopLeft'
| 'fadeInTopRight'
| 'fadeInUp'
| 'fadeInUpBig'
| 'flipInX'
| 'flipInY'
| 'jackInTheBox'
| 'lightSpeedInLeft'
| 'lightSpeedInRight'
| 'rollIn'
| 'rotateIn'
| 'rotateInDownLeft'
| 'rotateInDownRight'
| 'rotateInUpLeft'
| 'rotateInUpRight'
| 'slideInDown'
| 'slideInLeft'
| 'slideInRight'
| 'slideInUp'
| 'zoomIn'
| 'zoomInDown'
| 'zoomInLeft'
| 'zoomInRight'
| 'zoomInUp'
;
export type outAnimations =
| 'backOutDown'
| 'backOutLeft'
| 'backOutRight'
| 'backOutUp'
| 'bounceOut'
| 'bounceOutDown'
| 'bounceOutLeft'
| 'bounceOutRight'
| 'bounceOutUp'
| 'fadeOut'
| 'fadeOutBottomLeft'
| 'fadeOutBottomRight'
| 'fadeOutDown'
| 'fadeOutDownBig'
| 'fadeOutLeft'
| 'fadeOutLeftBig'
| 'fadeOutRight'
| 'fadeOutRightBig'
| 'fadeOutTopLeft'
| 'fadeOutTopRight'
| 'fadeOutUp'
| 'fadeOutUpBig'
| 'flipOutX'
| 'flipOutY'
| 'lightSpeedOutLeft'
| 'lightSpeedOutRight'
| 'rollOut'
| 'rotateOut'
| 'rotateOutDownLeft'
| 'rotateOutDownRight'
| 'rotateOutUpLeft'
| 'rotateOutUpRight'
| 'slideOutDown'
| 'slideOutLeft'
| 'slideOutRight'
| 'slideOutUp'
| 'zoomOut'
| 'zoomOutDown'
| 'zoomOutLeft'
| 'zoomOutRight'
| 'zoomOutUp'
;

View file

@ -0,0 +1,106 @@
module.exports.generalAnimations = [
'bounce',
'flash',
'flip',
'headShake',
'heartBeat',
'hinge',
'jello',
'pulse',
'rubberBand',
'shake',
'shakeX',
'shakeY',
'swing',
'tada',
'wobble'
]
module.exports.inAnimations = [
'backInDown',
'backInLeft',
'backInRight',
'backInUp',
'bounceIn',
'bounceInDown',
'bounceInLeft',
'bounceInRight',
'bounceInUp',
'fadeIn',
'fadeInBottomLeft',
'fadeInBottomRight',
'fadeInDown',
'fadeInDownBig',
'fadeInLeft',
'fadeInLeftBig',
'fadeInRight',
'fadeInRightBig',
'fadeInTopLeft',
'fadeInTopRight',
'fadeInUp',
'fadeInUpBig',
'flipInX',
'flipInY',
'jackInTheBox',
'lightSpeedInLeft',
'lightSpeedInRight',
'rollIn',
'rotateIn',
'rotateInDownLeft',
'rotateInDownRight',
'rotateInUpLeft',
'rotateInUpRight',
'slideInDown',
'slideInLeft',
'slideInRight',
'slideInUp',
'zoomIn',
'zoomInDown',
'zoomInLeft',
'zoomInRight',
'zoomInUp'
]
module.exports.outAnimations = [
'backOutDown',
'backOutLeft',
'backOutRight',
'backOutUp',
'bounceOut',
'bounceOutDown',
'bounceOutLeft',
'bounceOutRight',
'bounceOutUp',
'fadeOut',
'fadeOutBottomLeft',
'fadeOutBottomRight',
'fadeOutDown',
'fadeOutDownBig',
'fadeOutLeft',
'fadeOutLeftBig',
'fadeOutRight',
'fadeOutRightBig',
'fadeOutTopLeft',
'fadeOutTopRight',
'fadeOutUp',
'fadeOutUpBig',
'flipOutX',
'flipOutY',
'lightSpeedOutLeft',
'lightSpeedOutRight',
'rollOut',
'rotateOut',
'rotateOutDownLeft',
'rotateOutDownRight',
'rotateOutUpLeft',
'rotateOutUpRight',
'slideOutDown',
'slideOutLeft',
'slideOutRight',
'slideOutUp',
'zoomOut',
'zoomOutDown',
'zoomOutLeft',
'zoomOutRight',
'zoomOutUp'
]

View file

@ -0,0 +1,107 @@
export const generalAnimations = [
'bounce',
'flash',
'flip',
'headShake',
'heartBeat',
'hinge',
'jello',
'pulse',
'rubberBand',
'shake',
'shakeX',
'shakeY',
'swing',
'tada',
'wobble'
]
export const inAnimations = [
'backInDown',
'backInLeft',
'backInRight',
'backInUp',
'bounceIn',
'bounceInDown',
'bounceInLeft',
'bounceInRight',
'bounceInUp',
'fadeIn',
'fadeInBottomLeft',
'fadeInBottomRight',
'fadeInDown',
'fadeInDownBig',
'fadeInLeft',
'fadeInLeftBig',
'fadeInRight',
'fadeInRightBig',
'fadeInTopLeft',
'fadeInTopRight',
'fadeInUp',
'fadeInUpBig',
'flipInX',
'flipInY',
'jackInTheBox',
'lightSpeedInLeft',
'lightSpeedInRight',
'rollIn',
'rotateIn',
'rotateInDownLeft',
'rotateInDownRight',
'rotateInUpLeft',
'rotateInUpRight',
'slideInDown',
'slideInLeft',
'slideInRight',
'slideInUp',
'zoomIn',
'zoomInDown',
'zoomInLeft',
'zoomInRight',
'zoomInUp'
]
export const outAnimations = [
'backOutDown',
'backOutLeft',
'backOutRight',
'backOutUp',
'bounceOut',
'bounceOutDown',
'bounceOutLeft',
'bounceOutRight',
'bounceOutUp',
'fadeOut',
'fadeOutBottomLeft',
'fadeOutBottomRight',
'fadeOutDown',
'fadeOutDownBig',
'fadeOutLeft',
'fadeOutLeftBig',
'fadeOutRight',
'fadeOutRightBig',
'fadeOutTopLeft',
'fadeOutTopRight',
'fadeOutUp',
'fadeOutUpBig',
'flipOutX',
'flipOutY',
'lightSpeedOutLeft',
'lightSpeedOutRight',
'rollOut',
'rotateOut',
'rotateOutDownLeft',
'rotateOutDownRight',
'rotateOutUpLeft',
'rotateOutUpRight',
'slideOutDown',
'slideOutLeft',
'slideOutRight',
'slideOutUp',
'zoomOut',
'zoomOutDown',
'zoomOutLeft',
'zoomOutRight',
'zoomOutUp'
]

View file

@ -0,0 +1,20 @@
@keyframes backInDown {
0% {
transform: translateY(-1200px) scale(0.7);
opacity: 0.7;
}
80% {
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.backInDown {
animation-name: backInDown;
}

View file

@ -0,0 +1,20 @@
@keyframes backInLeft {
0% {
transform: translateX(-2000px) scale(0.7);
opacity: 0.7;
}
80% {
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.backInLeft {
animation-name: backInLeft;
}

View file

@ -0,0 +1,20 @@
@keyframes backInRight {
0% {
transform: translateX(2000px) scale(0.7);
opacity: 0.7;
}
80% {
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.backInRight {
animation-name: backInRight;
}

View file

@ -0,0 +1,20 @@
@keyframes backInUp {
0% {
transform: translateY(1200px) scale(0.7);
opacity: 0.7;
}
80% {
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.backInUp {
animation-name: backInUp;
}

View file

@ -0,0 +1,20 @@
@keyframes backOutDown {
0% {
transform: scale(1);
opacity: 1;
}
20% {
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
transform: translateY(700px) scale(0.7);
opacity: 0.7;
}
}
.backOutDown {
animation-name: backOutDown;
}

View file

@ -0,0 +1,20 @@
@keyframes backOutLeft {
0% {
transform: scale(1);
opacity: 1;
}
20% {
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
transform: translateX(-2000px) scale(0.7);
opacity: 0.7;
}
}
.backOutLeft {
animation-name: backOutLeft;
}

View file

@ -0,0 +1,20 @@
@keyframes backOutRight {
0% {
transform: scale(1);
opacity: 1;
}
20% {
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
transform: translateX(2000px) scale(0.7);
opacity: 0.7;
}
}
.backOutRight {
animation-name: backOutRight;
}

View file

@ -0,0 +1,20 @@
@keyframes backOutUp {
0% {
transform: scale(1);
opacity: 1;
}
20% {
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
transform: translateY(-700px) scale(0.7);
opacity: 0.7;
}
}
.backOutUp {
animation-name: backOutUp;
}

View file

@ -0,0 +1,34 @@
@keyframes bounce {
from,
20%,
53%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
40%,
43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0) scaleY(1.1);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0) scaleY(1.05);
}
80% {
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, -4px, 0) scaleY(1.02);
}
}
.bounce {
animation-name: bounce;
transform-origin: center bottom;
}

View file

@ -0,0 +1,42 @@
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}
}
.bounceIn {
animation-duration: calc(var(--animate-duration) * 0.75);
animation-name: bounceIn;
}

View file

@ -0,0 +1,35 @@
@keyframes bounceInDown {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0) scaleY(3);
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
to {
transform: translate3d(0, 0, 0);
}
}
.bounceInDown {
animation-name: bounceInDown;
}

View file

@ -0,0 +1,35 @@
@keyframes bounceInLeft {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0) scaleX(3);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0) scaleX(1);
}
75% {
transform: translate3d(-10px, 0, 0) scaleX(0.98);
}
90% {
transform: translate3d(5px, 0, 0) scaleX(0.995);
}
to {
transform: translate3d(0, 0, 0);
}
}
.bounceInLeft {
animation-name: bounceInLeft;
}

View file

@ -0,0 +1,35 @@
@keyframes bounceInRight {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
transform: translate3d(3000px, 0, 0) scaleX(3);
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0) scaleX(1);
}
75% {
transform: translate3d(10px, 0, 0) scaleX(0.98);
}
90% {
transform: translate3d(-5px, 0, 0) scaleX(0.995);
}
to {
transform: translate3d(0, 0, 0);
}
}
.bounceInRight {
animation-name: bounceInRight;
}

View file

@ -0,0 +1,35 @@
@keyframes bounceInUp {
from,
60%,
75%,
90%,
to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
transform: translate3d(0, 3000px, 0) scaleY(5);
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0) scaleY(0.9);
}
75% {
transform: translate3d(0, 10px, 0) scaleY(0.95);
}
90% {
transform: translate3d(0, -5px, 0) scaleY(0.985);
}
to {
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
animation-name: bounceInUp;
}

View file

@ -0,0 +1,21 @@
@keyframes bounceOut {
20% {
transform: scale3d(0.9, 0.9, 0.9);
}
50%,
55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
}
.bounceOut {
animation-duration: calc(var(--animate-duration) * 0.75);
animation-name: bounceOut;
}

View file

@ -0,0 +1,20 @@
@keyframes bounceOutDown {
20% {
transform: translate3d(0, 10px, 0) scaleY(0.985);
}
40%,
45% {
opacity: 1;
transform: translate3d(0, -20px, 0) scaleY(0.9);
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0) scaleY(3);
}
}
.bounceOutDown {
animation-name: bounceOutDown;
}

View file

@ -0,0 +1,15 @@
@keyframes bounceOutLeft {
20% {
opacity: 1;
transform: translate3d(20px, 0, 0) scaleX(0.9);
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0) scaleX(2);
}
}
.bounceOutLeft {
animation-name: bounceOutLeft;
}

View file

@ -0,0 +1,15 @@
@keyframes bounceOutRight {
20% {
opacity: 1;
transform: translate3d(-20px, 0, 0) scaleX(0.9);
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0) scaleX(2);
}
}
.bounceOutRight {
animation-name: bounceOutRight;
}

View file

@ -0,0 +1,20 @@
@keyframes bounceOutUp {
20% {
transform: translate3d(0, -10px, 0) scaleY(0.985);
}
40%,
45% {
opacity: 1;
transform: translate3d(0, 20px, 0) scaleY(0.9);
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0) scaleY(3);
}
}
.bounceOutUp {
animation-name: bounceOutUp;
}

View file

@ -0,0 +1,13 @@
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeInBottomLeft {
from {
opacity: 0;
transform: translate3d(-100%, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInBottomLeft {
animation-name: fadeInBottomLeft;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeInBottomRight {
from {
opacity: 0;
transform: translate3d(100%, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInBottomRight {
animation-name: fadeInBottomRight;
}

View file

@ -0,0 +1,15 @@
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInDown {
animation-name: fadeInDown;
}

View file

@ -0,0 +1,15 @@
@keyframes fadeInDownBig {
from {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInDownBig {
animation-name: fadeInDownBig;
}

View file

@ -0,0 +1,15 @@
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInLeft {
animation-name: fadeInLeft;
}

View file

@ -0,0 +1,15 @@
@keyframes fadeInLeftBig {
from {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInLeftBig {
animation-name: fadeInLeftBig;
}

View file

@ -0,0 +1,15 @@
@keyframes fadeInRight {
from {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInRight {
animation-name: fadeInRight;
}

View file

@ -0,0 +1,15 @@
@keyframes fadeInRightBig {
from {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInRightBig {
animation-name: fadeInRightBig;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeInTopLeft {
from {
opacity: 0;
transform: translate3d(-100%, -100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInTopLeft {
animation-name: fadeInTopLeft;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeInTopRight {
from {
opacity: 0;
transform: translate3d(100%, -100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInTopRight {
animation-name: fadeInTopRight;
}

View file

@ -0,0 +1,15 @@
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInUp {
animation-name: fadeInUp;
}

View file

@ -0,0 +1,15 @@
@keyframes fadeInUpBig {
from {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.fadeInUpBig {
animation-name: fadeInUpBig;
}

View file

@ -0,0 +1,13 @@
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeOutBottomLeft {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-100%, 100%, 0);
}
}
.fadeOutBottomLeft {
animation-name: fadeOutBottomLeft;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeOutBottomRight {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
transform: translate3d(100%, 100%, 0);
}
}
.fadeOutBottomRight {
animation-name: fadeOutBottomRight;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
}
.fadeOutDown {
animation-name: fadeOutDown;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, 2000px, 0);
}
}
.fadeOutDownBig {
animation-name: fadeOutDownBig;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
}
.fadeOutLeft {
animation-name: fadeOutLeft;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(-2000px, 0, 0);
}
}
.fadeOutLeftBig {
animation-name: fadeOutLeftBig;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
}
.fadeOutRight {
animation-name: fadeOutRight;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(2000px, 0, 0);
}
}
.fadeOutRightBig {
animation-name: fadeOutRightBig;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeOutTopLeft {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
transform: translate3d(-100%, -100%, 0);
}
}
.fadeOutTopLeft {
animation-name: fadeOutTopLeft;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeOutTopRight {
from {
opacity: 1;
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
transform: translate3d(100%, -100%, 0);
}
}
.fadeOutTopRight {
animation-name: fadeOutTopRight;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
}
.fadeOutUp {
animation-name: fadeOutUp;
}

View file

@ -0,0 +1,14 @@
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(0, -2000px, 0);
}
}
.fadeOutUpBig {
animation-name: fadeOutUpBig;
}

View file

@ -0,0 +1,16 @@
@keyframes flash {
from,
50%,
to {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
.flash {
animation-name: flash;
}

View file

@ -0,0 +1,34 @@
@keyframes flip {
from {
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -190deg);
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
rotate3d(0, 1, 0, -170deg);
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
rotate3d(0, 1, 0, 0deg);
animation-timing-function: ease-in;
}
to {
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
animation-timing-function: ease-in;
}
}
.animated.flip {
backface-visibility: visible;
animation-name: flip;
}

View file

@ -0,0 +1,30 @@
@keyframes flipInX {
from {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
.flipInX {
backface-visibility: visible !important;
animation-name: flipInX;
}

View file

@ -0,0 +1,30 @@
@keyframes flipInY {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
.flipInY {
backface-visibility: visible !important;
animation-name: flipInY;
}

View file

@ -0,0 +1,21 @@
@keyframes flipOutX {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
animation-duration: calc(var(--animate-duration) * 0.75);
animation-name: flipOutX;
backface-visibility: visible !important;
}

View file

@ -0,0 +1,21 @@
@keyframes flipOutY {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.flipOutY {
animation-duration: calc(var(--animate-duration) * 0.75);
backface-visibility: visible !important;
animation-name: flipOutY;
}

View file

@ -0,0 +1,30 @@
@keyframes headShake {
0% {
transform: translateX(0);
}
6.5% {
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
transform: translateX(5px) rotateY(7deg);
}
31.5% {
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
transform: translateX(2px) rotateY(3deg);
}
50% {
transform: translateX(0);
}
}
.headShake {
animation-timing-function: ease-in-out;
animation-name: headShake;
}

View file

@ -0,0 +1,27 @@
@keyframes heartBeat {
0% {
transform: scale(1);
}
14% {
transform: scale(1.3);
}
28% {
transform: scale(1);
}
42% {
transform: scale(1.3);
}
70% {
transform: scale(1);
}
}
.heartBeat {
animation-name: heartBeat;
animation-duration: calc(var(--animate-duration) * 1.3);
animation-timing-function: ease-in-out;
}

View file

@ -0,0 +1,29 @@
@keyframes hinge {
0% {
animation-timing-function: ease-in-out;
}
20%,
60% {
transform: rotate3d(0, 0, 1, 80deg);
animation-timing-function: ease-in-out;
}
40%,
80% {
transform: rotate3d(0, 0, 1, 60deg);
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.hinge {
animation-duration: calc(var(--animate-duration) * 2);
animation-name: hinge;
transform-origin: top left;
}

View file

@ -0,0 +1,24 @@
@keyframes jackInTheBox {
from {
opacity: 0;
transform: scale(0.1) rotate(30deg);
transform-origin: center bottom;
}
50% {
transform: rotate(-10deg);
}
70% {
transform: rotate(3deg);
}
to {
opacity: 1;
transform: scale(1);
}
}
.jackInTheBox {
animation-name: jackInTheBox;
}

View file

@ -0,0 +1,40 @@
@keyframes jello {
from,
11.1%,
to {
transform: translate3d(0, 0, 0);
}
22.2% {
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.jello {
animation-name: jello;
transform-origin: center;
}

View file

@ -0,0 +1,24 @@
@keyframes lightSpeedIn {
from {
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
transform: skewX(20deg);
opacity: 1;
}
80% {
transform: skewX(-5deg);
}
to {
transform: translate3d(0, 0, 0);
}
}
.lightSpeedIn {
animation-name: lightSpeedIn;
animation-timing-function: ease-out;
}

View file

@ -0,0 +1,24 @@
@keyframes lightSpeedInLeft {
from {
transform: translate3d(-100%, 0, 0) skewX(30deg);
opacity: 0;
}
60% {
transform: skewX(-20deg);
opacity: 1;
}
80% {
transform: skewX(5deg);
}
to {
transform: translate3d(0, 0, 0);
}
}
.lightSpeedInLeft {
animation-name: lightSpeedInLeft;
animation-timing-function: ease-out;
}

View file

@ -0,0 +1,24 @@
@keyframes lightSpeedInRight {
from {
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
transform: skewX(20deg);
opacity: 1;
}
80% {
transform: skewX(-5deg);
}
to {
transform: translate3d(0, 0, 0);
}
}
.lightSpeedInRight {
animation-name: lightSpeedInRight;
animation-timing-function: ease-out;
}

View file

@ -0,0 +1,15 @@
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.lightSpeedOut {
animation-name: lightSpeedOut;
animation-timing-function: ease-in;
}

View file

@ -0,0 +1,15 @@
@keyframes lightSpeedOutLeft {
from {
opacity: 1;
}
to {
transform: translate3d(-100%, 0, 0) skewX(-30deg);
opacity: 0;
}
}
.lightSpeedOutLeft {
animation-name: lightSpeedOutLeft;
animation-timing-function: ease-in;
}

View file

@ -0,0 +1,15 @@
@keyframes lightSpeedOutRight {
from {
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.lightSpeedOutRight {
animation-name: lightSpeedOutRight;
animation-timing-function: ease-in;
}

View file

@ -0,0 +1,20 @@
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
to {
transform: scale3d(1, 1, 1);
}
}
.pulse {
animation-name: pulse;
animation-timing-function: ease-in-out;
}

View file

@ -0,0 +1,17 @@
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes rollIn {
from {
opacity: 0;
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.rollIn {
animation-name: rollIn;
}

View file

@ -0,0 +1,16 @@
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.rollOut {
animation-name: rollOut;
}

View file

@ -0,0 +1,16 @@
@keyframes rotateIn {
from {
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateIn {
animation-name: rotateIn;
transform-origin: center;
}

View file

@ -0,0 +1,16 @@
@keyframes rotateInDownLeft {
from {
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInDownLeft {
animation-name: rotateInDownLeft;
transform-origin: left bottom;
}

View file

@ -0,0 +1,16 @@
@keyframes rotateInDownRight {
from {
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInDownRight {
animation-name: rotateInDownRight;
transform-origin: right bottom;
}

View file

@ -0,0 +1,16 @@
@keyframes rotateInUpLeft {
from {
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInUpLeft {
animation-name: rotateInUpLeft;
transform-origin: left bottom;
}

View file

@ -0,0 +1,16 @@
@keyframes rotateInUpRight {
from {
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.rotateInUpRight {
animation-name: rotateInUpRight;
transform-origin: right bottom;
}

View file

@ -0,0 +1,15 @@
@keyframes rotateOut {
from {
opacity: 1;
}
to {
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
.rotateOut {
animation-name: rotateOut;
transform-origin: center;
}

View file

@ -0,0 +1,15 @@
@keyframes rotateOutDownLeft {
from {
opacity: 1;
}
to {
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
.rotateOutDownLeft {
animation-name: rotateOutDownLeft;
transform-origin: left bottom;
}

View file

@ -0,0 +1,15 @@
@keyframes rotateOutDownRight {
from {
opacity: 1;
}
to {
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutDownRight {
animation-name: rotateOutDownRight;
transform-origin: right bottom;
}

View file

@ -0,0 +1,15 @@
@keyframes rotateOutUpLeft {
from {
opacity: 1;
}
to {
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.rotateOutUpLeft {
animation-name: rotateOutUpLeft;
transform-origin: left bottom;
}

View file

@ -0,0 +1,15 @@
@keyframes rotateOutUpRight {
from {
opacity: 1;
}
to {
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
.rotateOutUpRight {
animation-name: rotateOutUpRight;
transform-origin: right bottom;
}

View file

@ -0,0 +1,33 @@
@keyframes rubberBand {
from {
transform: scale3d(1, 1, 1);
}
30% {
transform: scale3d(1.25, 0.75, 1);
}
40% {
transform: scale3d(0.75, 1.25, 1);
}
50% {
transform: scale3d(1.15, 0.85, 1);
}
65% {
transform: scale3d(0.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, 0.95, 1);
}
to {
transform: scale3d(1, 1, 1);
}
}
.rubberBand {
animation-name: rubberBand;
}

View file

@ -0,0 +1,25 @@
@keyframes shake {
from,
to {
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
transform: translate3d(10px, 0, 0);
}
}
.shake {
animation-name: shake;
}

View file

@ -0,0 +1,25 @@
@keyframes shakeX {
from,
to {
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
transform: translate3d(10px, 0, 0);
}
}
.shakeX {
animation-name: shakeX;
}

View file

@ -0,0 +1,25 @@
@keyframes shakeY {
from,
to {
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
transform: translate3d(0, -10px, 0);
}
20%,
40%,
60%,
80% {
transform: translate3d(0, 10px, 0);
}
}
.shakeY {
animation-name: shakeY;
}

View file

@ -0,0 +1,14 @@
@keyframes slideInDown {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
animation-name: slideInDown;
}

View file

@ -0,0 +1,14 @@
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
animation-name: slideInLeft;
}

View file

@ -0,0 +1,14 @@
@keyframes slideInRight {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
animation-name: slideInRight;
}

View file

@ -0,0 +1,14 @@
@keyframes slideInUp {
from {
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInUp {
animation-name: slideInUp;
}

View file

@ -0,0 +1,14 @@
@keyframes slideOutDown {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, 100%, 0);
}
}
.slideOutDown {
animation-name: slideOutDown;
}

View file

@ -0,0 +1,14 @@
@keyframes slideOutLeft {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(-100%, 0, 0);
}
}
.slideOutLeft {
animation-name: slideOutLeft;
}

View file

@ -0,0 +1,14 @@
@keyframes slideOutRight {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(100%, 0, 0);
}
}
.slideOutRight {
animation-name: slideOutRight;
}

View file

@ -0,0 +1,14 @@
@keyframes slideOutUp {
from {
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
transform: translate3d(0, -100%, 0);
}
}
.slideOutUp {
animation-name: slideOutUp;
}

View file

@ -0,0 +1,26 @@
@keyframes swing {
20% {
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
transform: rotate3d(0, 0, 1, -5deg);
}
to {
transform: rotate3d(0, 0, 1, 0deg);
}
}
.swing {
transform-origin: top center;
animation-name: swing;
}

View file

@ -0,0 +1,31 @@
@keyframes tada {
from {
transform: scale3d(1, 1, 1);
}
10%,
20% {
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%,
50%,
70%,
90% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%,
60%,
80% {
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
transform: scale3d(1, 1, 1);
}
}
.tada {
animation-name: tada;
}

View file

@ -0,0 +1,35 @@
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes wobble {
from {
transform: translate3d(0, 0, 0);
}
15% {
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
transform: translate3d(0, 0, 0);
}
}
.wobble {
animation-name: wobble;
}

View file

@ -0,0 +1,14 @@
@keyframes zoomIn {
from {
opacity: 0;
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
.zoomIn {
animation-name: zoomIn;
}

View file

@ -0,0 +1,17 @@
@keyframes zoomInDown {
from {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.zoomInDown {
animation-name: zoomInDown;
}

Some files were not shown because too many files have changed in this diff Show more