redo main/register page
This commit is contained in:
SowinskiBraeden committed
1 parent
eaa2febbf2
commit
1ad5eb654b
400 files changed
+93168
-323
No files matched your search
@@ -0,0 +1,35 @@
|
||||
---
|
||||
name: Bug report
|
||||
about: Create a report to help us improve
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Describe the bug** A clear and concise description of what the bug is.
|
||||
|
||||
**To Reproduce** Steps to reproduce the behavior:
|
||||
|
||||
1. Go to '...'
|
||||
2. Click on '....'
|
||||
3. Scroll down to '....'
|
||||
4. See error
|
||||
|
||||
**Expected behavior** A clear and concise description of what you expected to happen.
|
||||
|
||||
**Screenshots** If applicable, add screenshots to help explain your problem.
|
||||
|
||||
**Desktop (please complete the following information):**
|
||||
|
||||
- OS: [e.g. iOS]
|
||||
- Browser [e.g. chrome, safari]
|
||||
- Version [e.g. 22]
|
||||
|
||||
**Smartphone (please complete the following information):**
|
||||
|
||||
- Device: [e.g. iPhone6]
|
||||
- OS: [e.g. iOS8.1]
|
||||
- Browser [e.g. stock browser, safari]
|
||||
- Version [e.g. 22]
|
||||
|
||||
**Additional context** Add any other context about the problem here.
|
||||
@@ -0,0 +1,15 @@
|
||||
---
|
||||
name: Feature request
|
||||
about: Suggest an idea for this project
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
---
|
||||
|
||||
**Is your feature request related to a problem? Please describe.** A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
||||
|
||||
**Describe the solution you'd like** A clear and concise description of what you want to happen.
|
||||
|
||||
**Describe alternatives you've considered** A clear and concise description of any alternative solutions or features you've considered.
|
||||
|
||||
**Additional context** Add any other context or screenshots about the feature request here.
|
||||
@@ -0,0 +1,10 @@
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: npm
|
||||
directory: "/"
|
||||
schedule:
|
||||
interval: daily
|
||||
open-pull-requests-limit: 10
|
||||
reviewers:
|
||||
- "daneden"
|
||||
- "eltonmesquita"
|
||||
@@ -0,0 +1,48 @@
|
||||
# Animate.css
|
||||
|
||||
[](https://github.com/animate-css/animate.css/releases) [](https://github.com/animate-css/animate.css/stargazers) [](https://github.com/animate-css/animate.css/network/members) [](https://github.com/animate-css/animate.css/blob/main/LICENSE)
|
||||
|
||||
> If you need the old docs - v3.x.x and under - you can find it [here](https://github.com/animate-css/animate.css/tree/a8d92e585b1b302f7749809c3308d5e381f9cb17).
|
||||
|
||||
## _Just-add-water CSS animation_
|
||||
|
||||
## Installation
|
||||
|
||||
Install with npm:
|
||||
|
||||
```shell
|
||||
npm install animate.css --save
|
||||
```
|
||||
|
||||
Install with yarn:
|
||||
|
||||
```shell
|
||||
yarn add animate.css
|
||||
```
|
||||
|
||||
## Getting started
|
||||
|
||||
You can find the Animate.css documentation on the [website](https://animate.style/).
|
||||
|
||||
## Accessibility
|
||||
|
||||
Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the majors browsers and OS), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.
|
||||
|
||||
## Core team
|
||||
|
||||
|  |  |  |
|
||||
| --- | --- | --- |
|
||||
| [Daniel Eden](https://github.com/daneden) | [Elton Mesquita](https://github.com/eltonmesquita) | [Waren Gonzaga](https://github.com/WarenGonzaga) |
|
||||
| Animate.css Creator | Maintainer | Core Contributor |
|
||||
|
||||
## License
|
||||
|
||||
Animate.css is licensed under the MIT license. <https://opensource.org/licenses/MIT>
|
||||
|
||||
## Code of Conduct
|
||||
|
||||
This project and everyone participating in it is governed by the [Contributor Covenant Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [callmeelton@gmail.com](mailto:callmeelton@gmail.com).
|
||||
|
||||
## Contributing
|
||||
|
||||
Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorised [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](https://codepen.io). That **last one is important**.
|
||||
@@ -0,0 +1 @@
|
||||
animate.style
|
||||
File diff suppressed because one or more lines are too long.
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,14 @@
|
||||
import buildDocsIndex from './modules/buildDocsIndex.mjs';
|
||||
import playground from './modules/playground.mjs';
|
||||
import startAnimations from './modules/startAnimations.mjs';
|
||||
import toggleOnClick from './modules/toggle.mjs';
|
||||
|
||||
buildDocsIndex();
|
||||
playground();
|
||||
|
||||
toggleOnClick('.callout-showList', 'html', 'animationList-active');
|
||||
toggleOnClick('.callout-hideList', 'html', 'animationList-active');
|
||||
toggleOnClick('.hamburger', 'html', 'hamburger-active');
|
||||
toggleOnClick('.docs-index', 'html', 'hamburger-active');
|
||||
|
||||
requestAnimationFrame(startAnimations);
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
Docs index
|
||||
*/
|
||||
|
||||
const indexItemTemplate = (item = '', id) => `
|
||||
<li class="docs-indexItem"><a href="#${id}" title="${item}">${item}</a></li>
|
||||
`
|
||||
|
||||
const indexList = (sections = [], container = '.sidebar', heading = 'h2') => {
|
||||
const containerEl = document.querySelector(container)
|
||||
const list = document.createElement('ul')
|
||||
|
||||
const children = sections.map(section => {
|
||||
const title = section.querySelector(heading)
|
||||
const id = section.getAttribute('id')
|
||||
|
||||
return title && indexItemTemplate(title.innerText, id)
|
||||
})
|
||||
|
||||
list.classList.add('docs-index')
|
||||
list.innerHTML = children.join('\n')
|
||||
|
||||
containerEl.insertAdjacentElement('beforeend', list)
|
||||
|
||||
return list
|
||||
}
|
||||
|
||||
const buildDocsIndex = (docs = '#documentation', docSection = '[class*="docSection-"]', titles = 'h2') => {
|
||||
const docsEl = document.querySelector(docs)
|
||||
const sections = [...docsEl.querySelectorAll(docSection)]
|
||||
|
||||
const list = indexList(sections)
|
||||
|
||||
return list
|
||||
}
|
||||
|
||||
export default buildDocsIndex
|
||||
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
Animation playground
|
||||
*/
|
||||
|
||||
const clearAll = (items = [], className = 'active') => {
|
||||
items.forEach((item) => item.classList.remove(className));
|
||||
};
|
||||
|
||||
const setEndListener = (target, defaultClass) => {
|
||||
target.addEventListener('animationend', (e) => {
|
||||
target.setAttribute('class', defaultClass);
|
||||
document.documentElement.classList.remove('isPlaying');
|
||||
});
|
||||
};
|
||||
|
||||
const playground = (
|
||||
container = '.animation-list',
|
||||
item = '.animation-item',
|
||||
target = '.callout-title',
|
||||
) => {
|
||||
const containerEl = document.querySelector(container);
|
||||
const items = [...containerEl.querySelectorAll(item)];
|
||||
const targetEl = document.querySelector(target);
|
||||
|
||||
setEndListener(targetEl, target.replace('.', ''));
|
||||
|
||||
containerEl.addEventListener('click', (e) => {
|
||||
const el = e.target
|
||||
|
||||
if(el.classList.contains('animation-item--title')) {
|
||||
clearAll(items);
|
||||
const animation = `animate__${el.parentElement.getAttribute('data-animation')}`;
|
||||
|
||||
targetEl.classList.add('animate__animated', animation);
|
||||
document.documentElement.classList.add('isPlaying');
|
||||
document.documentElement.classList.remove('animationList-active');
|
||||
}
|
||||
|
||||
if (el.classList.contains('copy-icon')) {
|
||||
const animation = `animate__${el.parentElement.getAttribute('data-animation')}`;
|
||||
navigator.clipboard.writeText(animation);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export default playground;
|
||||
@@ -0,0 +1,18 @@
|
||||
/**
|
||||
Slows animations
|
||||
*/
|
||||
|
||||
const slowDownAnimations = (target) => {
|
||||
const targetEl = document.querySelector(target)
|
||||
const doc = document.documentElement
|
||||
|
||||
targetEl.addEventListener('click', () => {
|
||||
const currentDuration = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue('--animate-duration')
|
||||
const newDuration = currentDuration === '1s' ? '2s' : '1s'
|
||||
|
||||
document.documentElement.style.setProperty('--animate-duration', newDuration);
|
||||
})
|
||||
}
|
||||
|
||||
export default slowDownAnimations
|
||||
@@ -0,0 +1,23 @@
|
||||
/**
|
||||
Intro animation
|
||||
*/
|
||||
|
||||
const startAnimation = () => {
|
||||
const title = document.querySelector('.callout-title')
|
||||
const subTitle = document.querySelector('.callout-subtitle')
|
||||
const sidebar = document.querySelector('.animation-list')
|
||||
const button = document.querySelector('.callout-showList')
|
||||
|
||||
|
||||
const titleAnimation = 'zoomInDown'
|
||||
const subTitleAnimation = 'zoomInDown'
|
||||
const buttonAnimation = 'zoomInUp'
|
||||
const sidebarAnimation = 'fadeInRight'
|
||||
|
||||
title.classList.add('animate__animated', `animate__${titleAnimation}`)
|
||||
subTitle.classList.add('animate__animated', `animate__${subTitleAnimation}`)
|
||||
button.classList.add('animate__animated', `animate__${buttonAnimation}`)
|
||||
sidebar.classList.add('animate__animated', `animate__${sidebarAnimation}`)
|
||||
}
|
||||
|
||||
export default startAnimation
|
||||
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
Mobile animation list
|
||||
*/
|
||||
|
||||
const toggleOnClick = (el, target, className) => {
|
||||
const element = document.querySelector(el)
|
||||
const targetEl = document.querySelector(target)
|
||||
|
||||
element.addEventListener('click', e => {
|
||||
targetEl.classList.toggle(className)
|
||||
})
|
||||
}
|
||||
|
||||
export default toggleOnClick
|
||||
@@ -0,0 +1,604 @@
|
||||
/*-----------------------------------*\
|
||||
$BASE
|
||||
\*-----------------------------------*/
|
||||
|
||||
:root {
|
||||
--c-main: #351c75;
|
||||
--c-secondary: #e69138;
|
||||
--c-dark: #333;
|
||||
--c-background: #fce5cd;
|
||||
--c-background-dark: #f7d7b5;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
|
||||
color: var(--c-dark);
|
||||
font-size: 100%;
|
||||
font-family: 'Work Sans', sans-serif;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 700px) {
|
||||
html {
|
||||
font-size: 112.5%;
|
||||
line-height: 1.35;
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
* *,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: var(--c-main);
|
||||
}
|
||||
|
||||
pre,
|
||||
table {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 1em;
|
||||
background: var(--c-background);
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 1rem;
|
||||
|
||||
background-color: var(--c-dark);
|
||||
border-radius: 0.25em;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: transparent;
|
||||
font-size: 0.8rem !important;
|
||||
}
|
||||
|
||||
/*-----------------------------------*\
|
||||
$TYPOGRAPHY
|
||||
\*-----------------------------------*/
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
hr,
|
||||
table,
|
||||
pre,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var(--c-main);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.998rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.999rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.414rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/*-----------------------------------*\
|
||||
$GENERICS
|
||||
\*-----------------------------------*/
|
||||
|
||||
.button {
|
||||
padding: 0.4em 1em;
|
||||
|
||||
color: var(--c-main);
|
||||
border-radius: 4px;
|
||||
border: 2px solid var(--c-main);
|
||||
background: transparent;
|
||||
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 6px solid var(--c-secondary);
|
||||
padding-left: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/*-----------------------------------*\
|
||||
$INTRO
|
||||
\*-----------------------------------*/
|
||||
|
||||
.intro {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: [callout] 1fr;
|
||||
grid-template-rows: 1fr auto;
|
||||
grid-column-gap: 0;
|
||||
grid-row-gap: 1rem;
|
||||
column-gap: 0;
|
||||
row-gap: 1rem;
|
||||
grid-template-areas:
|
||||
'callout animation-list'
|
||||
'footer aimation-list';
|
||||
|
||||
max-width: 100%;
|
||||
height: calc(100vh - 2.55rem);
|
||||
overflow: hidden;
|
||||
|
||||
background-color: var(--c-background);
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.intro {
|
||||
height: calc(100vh - 2.8rem);
|
||||
grid-column-gap: 1rem;
|
||||
column-gap: 1rem;
|
||||
grid-template-columns: [callout] 1fr [sidebar] 250px;
|
||||
}
|
||||
}
|
||||
|
||||
.callout {
|
||||
grid-area: callout;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.callout-title {
|
||||
margin-bottom: 0;
|
||||
|
||||
animation-delay: 0.25s;
|
||||
|
||||
font-size: 4rem;
|
||||
font-size: min(14vw, 4rem);
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.callout-title {
|
||||
animation-delay: 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.callout-subtitle {
|
||||
margin-top: 0;
|
||||
|
||||
animation-delay: 0.3s;
|
||||
|
||||
color: var(--c-secondary);
|
||||
font-size: 1.3333rem;
|
||||
font-size: min(10vw, 1.3333rem);
|
||||
}
|
||||
|
||||
.callout-showList {
|
||||
margin-top: 2rem;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.callout-showList {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.callout-hideList {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.animation-list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
height: 100%;
|
||||
z-index: 90;
|
||||
|
||||
grid-area: animation-list;
|
||||
grid-row: 1 / 3;
|
||||
overflow-y: auto;
|
||||
padding: 2rem;
|
||||
|
||||
animation-delay: 0.7s;
|
||||
animation-fill-mode: backwards;
|
||||
transition: transform 0.2s ease-out;
|
||||
|
||||
background-color: var(--c-background-dark);
|
||||
}
|
||||
|
||||
.animationList-active .animation-list {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
.animation-list {
|
||||
position: relative;
|
||||
left: auto;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-footer {
|
||||
grid-area: footer;
|
||||
justify-self: center;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.animation-item {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 0.76em);
|
||||
right: -1em;
|
||||
padding: 0.5em 0.75em;
|
||||
|
||||
background-color: var(--c-main);
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.tooltip::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 1.1em;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 6px 4px 0 4px;
|
||||
border-color: var(--c-main) transparent transparent transparent;
|
||||
}
|
||||
|
||||
.copy-icon {
|
||||
position: relative;
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
align-self: center;
|
||||
|
||||
background-color: transparent;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477.867 477.867'%3E%3Cpath d='M341.333 85.333H51.2c-28.277 0-51.2 22.923-51.2 51.2v290.133c0 28.277 22.923 51.2 51.2 51.2h290.133c28.277 0 51.2-22.923 51.2-51.2V136.533c0-28.277-22.923-51.2-51.2-51.2zM358.4 426.667c0 9.426-7.641 17.067-17.067 17.067H51.2c-9.426 0-17.067-7.641-17.067-17.067V136.533c0-9.426 7.641-17.067 17.067-17.067h290.133c9.426 0 17.067 7.641 17.067 17.067v290.134z'/%3E%3Cpath d='M426.667 0h-307.2c-28.277 0-51.2 22.923-51.2 51.2 0 9.426 7.641 17.067 17.067 17.067S102.4 60.626 102.4 51.2s7.641-17.067 17.067-17.067h307.2c9.426 0 17.067 7.641 17.067 17.067v307.2c0 9.426-7.641 17.067-17.067 17.067s-17.067 7.641-17.067 17.067 7.641 17.067 17.067 17.067c28.277 0 51.2-22.923 51.2-51.2V51.2c0-28.277-22.923-51.2-51.2-51.2z'/%3E%3C/svg%3E");
|
||||
background-position: right bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 10px;
|
||||
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.animation-item:hover .copy-icon {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.copy-icon:hover .tooltip {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.animation-group,
|
||||
.animation-title {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.animation-title {
|
||||
margin-bottom: 0.2em;
|
||||
|
||||
color: var(--c-dark);
|
||||
}
|
||||
|
||||
.animation-group {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
list-style: none;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/*-----------------------------------*\
|
||||
$DOCS
|
||||
\*-----------------------------------*/
|
||||
|
||||
.container {
|
||||
gap: 1rem;
|
||||
margin: 0 auto;
|
||||
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: calc(100% - 300px - 1rem) 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1520px) {
|
||||
.container {
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 1fr 1100px 2fr;
|
||||
}
|
||||
}
|
||||
|
||||
.docs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.docs-header {
|
||||
position: relative;
|
||||
padding: 0.5rem 0;
|
||||
|
||||
background-color: var(--c-main);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.docs-mainTitle {
|
||||
grid-column: 1 / 2;
|
||||
padding-left: 1rem;
|
||||
margin-top: 0;
|
||||
|
||||
font-size: 1.3333rem;
|
||||
}
|
||||
|
||||
.docs-mainTitle a {
|
||||
color: var(--c-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1520px) {
|
||||
.docs-mainTitle {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.meta {
|
||||
padding-left: 2rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1520px) {
|
||||
.content {
|
||||
grid-column: 2 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
--size: 30px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
left: 100%;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
|
||||
background-color: var(--c-secondary);
|
||||
transition: transform 0.2s ease-out;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hamburger-active .hamburger {
|
||||
transform: translateX(-240px);
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.hamburger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
z-index: 100;
|
||||
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
padding-right: 1rem;
|
||||
|
||||
background: var(--c-background-dark);
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
.hamburger-active .sidebar {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.sidebar {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.hamburger-active .sidebar {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-github {
|
||||
display: inline-block;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
.docs-index {
|
||||
top: 1rem;
|
||||
padding-left: 2rem;
|
||||
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
.docs-index {
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-indexItem {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.edit-github {
|
||||
font-size: 0.75rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
[class*='docSection'] {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
[class*='docSection']:last-of-type {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
|
||||
.docSection-contributors table {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.docSection-contributors table th,
|
||||
.docSection-contributors table td {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.docSection-contributors table img {
|
||||
width: 150px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
/*-----------------------------------*\
|
||||
$FOOTER
|
||||
\*-----------------------------------*/
|
||||
|
||||
.main-footer {
|
||||
padding: 1rem;
|
||||
|
||||
background-color: var(--c-main);
|
||||
color: #fff;
|
||||
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main-footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main-footer a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/*-----------------------------------*\
|
||||
$REDUCED MOTION BANNER
|
||||
\*-----------------------------------*/
|
||||
|
||||
.motionless__banner a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.motionless__banner {
|
||||
display: none;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 150;
|
||||
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
|
||||
background: #333;
|
||||
color: #fff;
|
||||
border-top: 2px solid #ff5722;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.motionless__paragraph {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (print), (prefers-reduced-motion: reduce) {
|
||||
.motionless__banner {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.docs {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.animation-list {
|
||||
text-align: left;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
/**
|
||||
* Get and categorize all the animation names and compile
|
||||
* to HTML lists
|
||||
* @param {string} dir - directory containing the css file
|
||||
* @param {string} file - css file name
|
||||
*/
|
||||
|
||||
function compileAnimationlist(dir = '../source', file = 'animate.css') {
|
||||
const filePath = path.join(__dirname, dir, file);
|
||||
const content = fs.readFileSync(filePath, 'utf8');
|
||||
const globalRegex = /\/(.*)\w/g;
|
||||
const itemRegex = /(\/)(.*)(\.)/;
|
||||
|
||||
const rawList = content.match(globalRegex);
|
||||
let currentGroup;
|
||||
let list = {};
|
||||
|
||||
rawList.forEach((i) => {
|
||||
const item = i.match(itemRegex);
|
||||
|
||||
if (item == null) {
|
||||
const title = i.replace('/* ', '');
|
||||
currentGroup = title;
|
||||
list[title] = [];
|
||||
|
||||
return currentGroup;
|
||||
}
|
||||
|
||||
return list[currentGroup].push(item[2]);
|
||||
}, {});
|
||||
|
||||
const itemTemplate = (item) => `
|
||||
<li class="animation-item" data-animation="${item}">
|
||||
<span class="animation-item--title">${item}</span>
|
||||
<button class="copy-icon" type="button">
|
||||
<span class="tooltip">Copy class name to clipboard</span>
|
||||
</button>
|
||||
</li>`;
|
||||
|
||||
const listTemplate = (title, items) => {
|
||||
const parsedTitle = title.toLowerCase().replace(' ', '_');
|
||||
|
||||
return `
|
||||
<section class="${parsedTitle}" id="${parsedTitle}">
|
||||
<h3 class="animation-title">${title}</h3>
|
||||
<ul class="animation-group">${items.join('\n')}</ul>
|
||||
</section>
|
||||
`;
|
||||
};
|
||||
|
||||
const compile = (list) => {
|
||||
const titles = Object.keys(list);
|
||||
|
||||
return titles.map((title) => {
|
||||
const items = list[title].map((item) => itemTemplate(item));
|
||||
return listTemplate(title, items);
|
||||
});
|
||||
};
|
||||
|
||||
return compile(list).join('\n');
|
||||
}
|
||||
|
||||
module.exports = compileAnimationlist;
|
||||
@@ -0,0 +1,52 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const md = require('markdown-it')({
|
||||
html: true,
|
||||
linkify: true,
|
||||
});
|
||||
|
||||
/**
|
||||
* Converts string to slug. This is as simple as can be and doesn't handle much usecases on purpose.
|
||||
* @param {string} text - string to be converted to slug
|
||||
*/
|
||||
|
||||
function convertFileNameToId(text) {
|
||||
return text.toLowerCase().match(/([a-z]+[-]*[a-z])\w+/)[0];
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets all the markdown files on a folder, compile them to html and returns
|
||||
* @param {string} dir - folder containing all the .md files
|
||||
*/
|
||||
|
||||
function compileMD(dir = 'sections') {
|
||||
const directory = path.join(__dirname, dir);
|
||||
const files = fs.readdirSync(directory).sort();
|
||||
|
||||
const sectionTemplate = (file, content) => {
|
||||
const message = 'Edit this on GitHub';
|
||||
const fileName = convertFileNameToId(file);
|
||||
const editURL = `https://github.com/animate-css/animate.css/blob/main/docsSource/sections/${file}`;
|
||||
const parsedContent = md.render(content);
|
||||
|
||||
return `
|
||||
<section class="docSection-${fileName}" id="${fileName}">
|
||||
${parsedContent}
|
||||
<p class="edit-github"><a href="${editURL}" title="${message}">${message}</a></p>
|
||||
</section>
|
||||
`;
|
||||
};
|
||||
|
||||
const readMD = (file) => {
|
||||
const filePath = path.join(__dirname, dir, file);
|
||||
const content = fs.readFileSync(filePath, 'utf8');
|
||||
|
||||
return sectionTemplate(file, content);
|
||||
};
|
||||
|
||||
const filesContent = files.map((section) => readMD(section));
|
||||
|
||||
return filesContent.join('\n');
|
||||
}
|
||||
|
||||
module.exports = compileMD;
|
||||
@@ -0,0 +1,25 @@
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
|
||||
const {version} = JSON.parse(fs.readFileSync('package.json'));
|
||||
const compileMD = require('./compileMD');
|
||||
const compileAnimationList = require('./compileAnimationList');
|
||||
|
||||
const templatePath = path.join(__dirname, 'template.html');
|
||||
const template = fs.readFileSync(templatePath, 'utf8');
|
||||
const outputPath = '../docs';
|
||||
const outputFile = 'index.html';
|
||||
|
||||
const docs = compileMD();
|
||||
const list = compileAnimationList();
|
||||
|
||||
const output = path.join(__dirname, outputPath, outputFile);
|
||||
|
||||
const withDocs = template.replace('{{docs}}', docs);
|
||||
const withListAndDocs = withDocs.replace('{{list}}', list);
|
||||
const withVersion = withListAndDocs.replace('{{version}}', version);
|
||||
|
||||
fs.writeFile(output, withVersion, 'utf8', (err) => {
|
||||
if (err) console.error(err);
|
||||
console.log('Template compiled succesfully.');
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
> Animate.css v4 brought some **breaking changes**, please refer to the [migration guide](#migration) before updating from v3.x and under.
|
||||
|
||||
**Animate.css** is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
|
||||
@@ -0,0 +1,87 @@
|
||||
## Installation and usage
|
||||
|
||||
### Installing
|
||||
|
||||
Install with npm:
|
||||
|
||||
```shell
|
||||
$ npm install animate.css --save
|
||||
```
|
||||
|
||||
with yarn:
|
||||
|
||||
```shell
|
||||
$ yarn add animate.css
|
||||
```
|
||||
|
||||
or add it directly to your webpage using a CDN:
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
|
||||
/>
|
||||
</head>
|
||||
```
|
||||
|
||||
### Basic usage
|
||||
|
||||
After installing Animate.css, add the class `animate__animated` to an element, along with any of the [animation names](#attention_seekers) (don't forget the `animate__` prefix!):
|
||||
|
||||
```html
|
||||
<h1 class="animate__animated animate__bounce">An animated element</h1>
|
||||
```
|
||||
|
||||
That's it! You've got a CSS animated element. Super!
|
||||
|
||||
> Animations can improve the UX of an interface, but keep in mind that they can also get in the way of your users! Please read the [best practices](#best-practices) and [gotchas](#gotchas) sections to bring your web-things to life in the best way possible.
|
||||
|
||||
#### Using `@keyframes`
|
||||
|
||||
Even though the library provides you a few helper classes like the `animated` class to get you up running quickly, you can use the provided animations `keyframes` directly. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.
|
||||
|
||||
Example:
|
||||
|
||||
```css
|
||||
.my-element {
|
||||
display: inline-block;
|
||||
margin: 0 0.5rem;
|
||||
|
||||
animation: bounce; /* referring directly to the animation's @keyframe declaration */
|
||||
animation-duration: 2s; /* don't forget to set a duration! */
|
||||
}
|
||||
```
|
||||
|
||||
Be aware that some animations are dependent on the `animation-timing` property set on the animation's class. Changing or not declaring it might lead to unexpected results.
|
||||
|
||||
#### CSS Custom Properties (CSS Variables)
|
||||
|
||||
Since version 4, Animate.css makes use of custom properties (also known as CSS variables) to define the animations duration, delay, and iteractions. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value to globally or locally.
|
||||
|
||||
Example:
|
||||
|
||||
```css
|
||||
/* This only changes this particular animation duration */
|
||||
.animate__animated.animate__bounce {
|
||||
--animate-duration: 2s;
|
||||
}
|
||||
|
||||
/* This changes all the animations globally */
|
||||
:root {
|
||||
--animate-duration: 800ms;
|
||||
--animate-delay: 0.9s;
|
||||
}
|
||||
```
|
||||
|
||||
Custom properties also make it easy to change all your animations time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner:
|
||||
|
||||
```javascript
|
||||
// All animations will take twice the time to accomplish
|
||||
document.documentElement.style.setProperty('--animate-duration', '2s');
|
||||
|
||||
// All animations will take half the time to accomplish
|
||||
document.documentElement.style.setProperty('--animate-duration', '.5s');
|
||||
```
|
||||
|
||||
Even though custom properties are not supported by some aging browsers, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations.
|
||||
@@ -0,0 +1,93 @@
|
||||
## Utility classes
|
||||
|
||||
Animate.css comes packed with a few utility classes to simplify its use.
|
||||
|
||||
### Delay classes
|
||||
|
||||
You can add delays directly on the element's class attribute, just like this:
|
||||
|
||||
```html
|
||||
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
|
||||
```
|
||||
|
||||
Animate.css provides the following delays:
|
||||
|
||||
| Class name | Default delay time |
|
||||
| ------------------- | ------------------ |
|
||||
| `animate__delay-2s` | `2s` |
|
||||
| `animate__delay-3s` | `3s` |
|
||||
| `animate__delay-4s` | `4s` |
|
||||
| `animate__delay-5s` | `5s` |
|
||||
|
||||
The provided delays are from 1 to 5 seconds. You can customize them setting the `--animate-delay` property to a longer or a shorter duration:
|
||||
|
||||
```css
|
||||
/* All delay classes will take 2x longer to start */
|
||||
:root {
|
||||
--animate-delay: 2s;
|
||||
}
|
||||
|
||||
/* All delay classes will take half the time to start */
|
||||
:root {
|
||||
--animate-delay: 0.5s;
|
||||
}
|
||||
```
|
||||
|
||||
### Slow, slower, fast, and Faster classes
|
||||
|
||||
You can control the speed of the animation by adding these classes, as below:
|
||||
|
||||
```html
|
||||
<div class="animate__animated animate__bounce animate__faster">Example</div>
|
||||
```
|
||||
|
||||
| Class name | Default speed time |
|
||||
| ----------------- | ------------------ |
|
||||
| `animate__slow` | `2s` |
|
||||
| `animate__slower` | `3s` |
|
||||
| `animate__fast` | `800ms` |
|
||||
| `animate__faster` | `500ms` |
|
||||
|
||||
The `animate__animated` class has a default speed of `1s`. You can also customize the animations duration through the `--animate-duration` property, globally or locally. This will affect both the animations and the utility classes. Example:
|
||||
|
||||
```css
|
||||
/* All animations will take twice as long to finish */
|
||||
:root {
|
||||
--animate-duration: 2s;
|
||||
}
|
||||
|
||||
/* Only this element will take half the time to finish */
|
||||
.my-element {
|
||||
--animate-duration: 0.5s;
|
||||
}
|
||||
```
|
||||
|
||||
Notice that some animations have a duration of less than 1 second. As we used the CSS `calc()` function, setting the duration through the `--animation-duration` property will respect these ratios. So, when you change the global duration all the animations will respond to that change!
|
||||
|
||||
### Repeating classes
|
||||
|
||||
You can control the iteration count of the animation by adding these classes, like below:
|
||||
|
||||
```html
|
||||
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
|
||||
```
|
||||
|
||||
| Class Name | Default iteration count |
|
||||
| ------------------- | ----------------------- |
|
||||
| `animate__repeat-1` | `1` |
|
||||
| `animate__repeat-2` | `2` |
|
||||
| `animate__repeat-3` | `3` |
|
||||
| `animate__infinite` | `infinite` |
|
||||
|
||||
As with the delay and speed classes, the `animate__repeat` class is based on the `--animate-repeat` property and has a default iteration count of `1`. You can customize them by setting the `--animate-repeat` property to a longer or a shorter value:
|
||||
|
||||
```css
|
||||
/* The element will repeat the animation 2x
|
||||
It's better to set this property locally and not globally or
|
||||
you might end up with a messy situation */
|
||||
.my-element {
|
||||
--animate-repeat: 2;
|
||||
}
|
||||
```
|
||||
|
||||
Notice that `animate__infinite` doesn't use any custom property and changes to `--animate-repeat` will have no effect on it. Don't forget to read the [best practices](#best-practices) section to make the best use of repeating animations.
|
||||
@@ -0,0 +1,60 @@
|
||||
## Best practices
|
||||
|
||||
Animations can greatly improve an interface's UX, but it's important to follow some guidelines to not overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a good start.
|
||||
|
||||
### Meaningful animations
|
||||
|
||||
You should avoid animating an element just for the sake of it. Keep in mind that animations should make an intention clear. Animations like attention seekers (bounce, flash, pulse, etc) should be used to bring the user's attention to something special in your interface and not only as a way to bring "flashiness" to it.
|
||||
|
||||
Entrances and exit animations should be used to orientate what is happening in the interface, clearly signaling that it's transitioning into a new state.
|
||||
|
||||
It doesn't mean that you should avoid adding playfulness to the interface, just be sure that the animations are not getting in the way of your user and that the page's performance is not affected by an exaggerated use of animations.
|
||||
|
||||
### Don't animate large elements
|
||||
|
||||
Avoid it as it won't bring much value to the user and will probably only cause confusion. Besides that, there is a good chance that the animations will be junky, culminating in bad UX.
|
||||
|
||||
### Don't animate root elements
|
||||
|
||||
Animating the `<html/>` or `<body/>` tags is possible, but you should avoid it. There were some reports pointing out that this could trigger some weird browser bugs. Besides, making the whole page bounce would hardly provide good value to your UX. If you indeed need this sort of effect, wrap your page in an element and animate it, like this:
|
||||
|
||||
```html
|
||||
<body>
|
||||
<main class="animate__animated animate__fadeInLeft">
|
||||
<!-- Your code -->
|
||||
</main>
|
||||
</body>
|
||||
```
|
||||
|
||||
### Infinite animations should be avoided
|
||||
|
||||
Even though Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!
|
||||
|
||||
### Mind the initial and final state of your elements
|
||||
|
||||
All the Animate.css animations include a CSS property called `animation-fill-mode` which controls the states of an element before and after animation. You can read more about it [here](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode). Animate.css defaults to `animation-fill-mode: both`, but you can change it to suit your needs.
|
||||
|
||||
### Don't disable the `prefers-reduced-motion` media query
|
||||
|
||||
Since version 3.7.0 Animate.css supports the `prefers-reduced-motion` media query which disables animations based on the OS system's preference on supporting browsers (most current browsers support it). This is a **critical accessibility feature** and should never be disabled! This is built into browsers to help people with vestibular and seizure disorders. You can read more about it [here](https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/). If your web-thing needs the animations to function, warn users, but don't disable the feature. You can do it easily with CSS only. Here's a simple example:
|
||||
|
||||
<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="eltonmesquita" data-slug-hash="oNjGGbw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Prefers-reduce-motion media query">
|
||||
<span>See the Pen <a href="https://codepen.io/eltonmesquita/pen/oNjGGbw">
|
||||
Prefers-reduce-motion media query</a> by Elton Mesquita (<a href="https://codepen.io/eltonmesquita">@eltonmesquita</a>)
|
||||
on <a href="https://codepen.io">CodePen</a>.</span>
|
||||
</p>
|
||||
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
|
||||
|
||||
<h2 id="gotchas">Gotchas</h2>
|
||||
|
||||
### You can't animate inline elements
|
||||
|
||||
Even though some browsers can animate inline elements, this goes against the CSS animation specs and will break on some browsers or eventually cease to work. Always animate block or inline-block level elements (grid and flex containers and children are block-level elements too). You can set an element to `display: inline-block` when animating an inline-level element.
|
||||
|
||||
### Overflow
|
||||
|
||||
Most of the Animate.css animations will move elements across the screen and might create scrollbars on your web-thing. This is manageable using the `overflow: hidden` property. There's no recipe to when and where to use it, but the basic idea is to use it in the parent holding the animated element. It's up to you to figure out when and how to use it, [this guide](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow) can help you understand it.
|
||||
|
||||
### Intervals between repeats
|
||||
|
||||
Unfortunately, this isn't possible with pure CSS right now. You have to use Javascript to achieve this result.
|
||||
@@ -0,0 +1,60 @@
|
||||
## Usage with Javascript
|
||||
|
||||
You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:
|
||||
|
||||
```javascript
|
||||
const element = document.querySelector('.my-element');
|
||||
element.classList.add('animate__animated', 'animate__bounceOutLeft');
|
||||
```
|
||||
|
||||
You can detect when an animation ends:
|
||||
|
||||
```javascript
|
||||
const element = document.querySelector('.my-element');
|
||||
element.classList.add('animate__animated', 'animate__bounceOutLeft');
|
||||
|
||||
element.addEventListener('animationend', () => {
|
||||
// do something
|
||||
});
|
||||
```
|
||||
|
||||
or change its duration:
|
||||
|
||||
```javascript
|
||||
const element = document.querySelector('.my-element');
|
||||
element.style.setProperty('--animate-duration', '0.5s');
|
||||
```
|
||||
|
||||
You can also use a simple function to add the animations classes and remove them automatically:
|
||||
|
||||
```javascript
|
||||
const animateCSS = (element, animation, prefix = 'animate__') =>
|
||||
// We create a Promise and return it
|
||||
new Promise((resolve, reject) => {
|
||||
const animationName = `${prefix}${animation}`;
|
||||
const node = document.querySelector(element);
|
||||
|
||||
node.classList.add(`${prefix}animated`, animationName);
|
||||
|
||||
// When the animation ends, we clean the classes and resolve the Promise
|
||||
function handleAnimationEnd() {
|
||||
node.classList.remove(`${prefix}animated`, animationName);
|
||||
resolve('Animation ended');
|
||||
}
|
||||
|
||||
node.addEventListener('animationend', handleAnimationEnd, {once: true});
|
||||
});
|
||||
```
|
||||
|
||||
And use it like this:
|
||||
|
||||
```javascript
|
||||
animateCSS('.my-element', 'bounce');
|
||||
|
||||
// or
|
||||
animateCSS('.my-element', 'bounce').then((message) => {
|
||||
// Do something after the animation
|
||||
});
|
||||
```
|
||||
|
||||
If you had a hard time understanding the previous function, have a look at [const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const), [classList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList), [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), and [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).
|
||||
@@ -0,0 +1,47 @@
|
||||
## Migration from v3.x and under
|
||||
|
||||
Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. But it also comes with a breaking change: we have added prefix for all of the Animate.css classes - defaulting to `animate__` - so a direct migration is not possible.
|
||||
|
||||
But fear not! Although the default build, `animate.min.css`, brings the `animate__` prefix we also provide the `animate.compat.css` file which brings no prefix at all, like the previous versions (3.x and under).
|
||||
|
||||
If you're using a bundler, just update your import:
|
||||
|
||||
from:
|
||||
|
||||
```js
|
||||
import 'animate.min.css';
|
||||
```
|
||||
|
||||
to
|
||||
|
||||
```js
|
||||
import 'animate.compat.css';
|
||||
```
|
||||
|
||||
Notice that depending on your project's configuration, this might change a bit.
|
||||
|
||||
In case of using a CDN, just update the link on your HTML:
|
||||
|
||||
from:
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
|
||||
/>
|
||||
</head>
|
||||
```
|
||||
|
||||
to
|
||||
|
||||
```html
|
||||
<head>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
|
||||
/>
|
||||
</head>
|
||||
```
|
||||
|
||||
In the case of a new project, it's highly recommended to use the default prefixed version as it'll make sure that you'll hardly have classes conflicting with your project. Besides, in later versions, we might decide to discontinue the `animate.compat.css` file.
|
||||
@@ -0,0 +1,53 @@
|
||||
## Custom Builds
|
||||
|
||||
Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS today.
|
||||
|
||||
First of all, you’ll need Node and all other dependencies:
|
||||
|
||||
```shell
|
||||
$ cd path/to/animate.css/
|
||||
$ npm install
|
||||
```
|
||||
|
||||
Next, run `npm start` to compile your custom build. Three files will be generated:
|
||||
|
||||
- `animate.css`: raw build, easy to read and without any optimization
|
||||
- `animate.min.css`: minified build ready for production
|
||||
- `animate.compat.css`: minified build ready for production **without class prefix**. This should only be used as an easy path for migrations.
|
||||
|
||||
For example, if you'll only use some of the “attention seekers” animations, simply edit the `./source/animate.css` file, delete every `@import` and the ones you want to use.
|
||||
|
||||
```css
|
||||
@import 'attention_seekers/bounce.css';
|
||||
@import 'attention_seekers/flash.css';
|
||||
@import 'attention_seekers/pulse.css';
|
||||
@import 'attention_seekers/rubberBand.css';
|
||||
@import 'attention_seekers/shake.css';
|
||||
@import 'attention_seekers/headShake.css';
|
||||
@import 'attention_seekers/swing.css';
|
||||
@import 'attention_seekers/tada.css';
|
||||
@import 'attention_seekers/wobble.css';
|
||||
@import 'attention_seekers/jello.css';
|
||||
@import 'attention_seekers/heartBeat.css';
|
||||
```
|
||||
|
||||
Now, just run `npm start` and your highly optimized build will be generated at the root of the project.
|
||||
|
||||
### Changing the default prefix
|
||||
|
||||
It's pretty straight forward to change animate's prefix on your custom build. Change the `animateConfig`'s `prefix` property in the `package.json` file and rebuild the library with `npm start`:
|
||||
|
||||
```json
|
||||
/* on Animate.css package.json */
|
||||
"animateConfig": {
|
||||
"prefix": "myCustomPrefix__"
|
||||
},
|
||||
```
|
||||
|
||||
then:
|
||||
|
||||
```shell
|
||||
$ npm start
|
||||
```
|
||||
|
||||
Easy peasy!
|
||||
@@ -0,0 +1,3 @@
|
||||
## Accessibility
|
||||
|
||||
Animate.css supports the [`prefers-reduced-motion` media query](https://webkit.org/blog/7551/responsive-design-for-motion/) so that users with motion sensitivity can opt-out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences and it will turn off CSS transitions for them without any further work required.
|
||||
@@ -0,0 +1,6 @@
|
||||
## Core team
|
||||
|
||||
|  |  |  |
|
||||
| --- | --- | --- |
|
||||
| [Daniel Eden](https://github.com/daneden) | [Elton Mesquita](https://github.com/eltonmesquita) | [Waren Gonzaga](https://github.com/WarenGonzaga) |
|
||||
| Animate.css creator | Maintainer | Core contributor |
|
||||
@@ -0,0 +1,11 @@
|
||||
## License and Contributing
|
||||
|
||||
Animate.css is licensed under the MIT license. (https://opensource.org/licenses/MIT)
|
||||
|
||||
### Contributing
|
||||
|
||||
Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc]) and let us see a demo of submitted animations in a [pen](https://codepen.io). That **last one is important**.
|
||||
|
||||
### Code of Conduct
|
||||
|
||||
This project and everyone participating in it are governed by the [Contributor Covenant Code of Conduct](https://github.com/animate-css/animate.css/blob/main/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [callmeelton@gmail.com](mailto:callmeelton@gmail.com).
|
||||
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>Animate.css | A cross-browser library of CSS animations.</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="title" content="Animate.css | A cross-browser library of CSS animations.">
|
||||
<meta name="description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://animate.style">
|
||||
<meta property="og:title" content="Animate.css | A cross-browser library of CSS animations.">
|
||||
<meta property="og:description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
|
||||
<meta property="og:image" content="https://animate.style/img/animatecss-opengraph.jpg">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta property="twitter:card" content="summary_large_image">
|
||||
<meta property="twitter:url" content="https://animate.style">
|
||||
<meta property="twitter:title" content="Animate.css | A cross-browser library of CSS animations.">
|
||||
<meta property="twitter:description" content="Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.">
|
||||
<meta property="twitter:image" content="https://animate.style/img/animatecss-opengraph.jpg">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
|
||||
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
|
||||
|
||||
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,700;1,400&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" href="animate.min.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<article class="intro">
|
||||
<section class="callout">
|
||||
<h1 class="callout-title">Animate.css</h1>
|
||||
<h2 class="callout-subtitle">Just-add-water CSS animations</h2>
|
||||
<p class="callout-showList">
|
||||
<button class="button button-animations">See animations</button>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="animation-list">
|
||||
<button class="callout-hideList button">Close list</button>
|
||||
{{list}}
|
||||
</section>
|
||||
|
||||
<footer class="intro-footer">
|
||||
<p>
|
||||
Another thing from
|
||||
<a href="https://daneden.me" target="_blank" title="Daniel Eden">Daniel Eden</a> and
|
||||
<a href="#contributors" title="Contributors">friends</a>
|
||||
</p>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<main>
|
||||
<header class="docs-header">
|
||||
<div class="container">
|
||||
<h2 class="docs-mainTitle">
|
||||
<a href="#documentation" title="Documentation">Documentation</a>
|
||||
</h2>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<article class="docs" id="documentation">
|
||||
<span class="hamburger">
|
||||
<svg
|
||||
width="23"
|
||||
height="15"
|
||||
viewBox="0 0 23 15"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<line y1="1.5" x2="23" y2="1.5" stroke="#351C75" stroke-width="3" />
|
||||
<line y1="7.5" x2="23" y2="7.5" stroke="#351C75" stroke-width="3" />
|
||||
<line y1="13.5" x2="23" y2="13.5" stroke="#351C75" stroke-width="3" />
|
||||
</svg>
|
||||
</span>
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
{{docs}}
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
<div class="meta">
|
||||
<a href="https://github.com/daneden/animate.css" target="_blank" class="icon-github">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 18"
|
||||
width="18"
|
||||
height="18"
|
||||
>
|
||||
<path
|
||||
fill="#000000"
|
||||
d="M16.793 4.703a8.96 8.96 0 00-3.276-3.276A8.803 8.803 0 009 .22a8.804 8.804 0 00-4.518 1.207 8.96 8.96 0 00-3.275 3.276A8.803 8.803 0 000 9.22c0 1.96.572 3.724 1.717 5.29 1.144 1.567 2.623 2.651 4.435 3.252.211.04.367.012.469-.081a.458.458 0 00.152-.352l-.006-.633c-.004-.398-.006-.746-.006-1.042l-.27.046a3.434 3.434 0 01-.65.041 4.958 4.958 0 01-.814-.082 1.82 1.82 0 01-.785-.351 1.487 1.487 0 01-.516-.72l-.117-.27a2.93 2.93 0 00-.369-.598c-.168-.219-.338-.367-.51-.445l-.082-.059a.865.865 0 01-.152-.14.643.643 0 01-.105-.165c-.024-.054-.004-.1.058-.135.063-.035.176-.052.34-.052l.234.035c.157.031.35.125.58.281.23.156.42.36.569.61.18.32.396.564.65.732.254.168.51.252.768.252.257 0 .48-.02.667-.059a2.33 2.33 0 00.528-.175c.07-.524.262-.927.574-1.208a8.026 8.026 0 01-1.201-.21 4.779 4.779 0 01-1.102-.458 3.153 3.153 0 01-.943-.785c-.25-.312-.455-.723-.615-1.23-.16-.508-.24-1.094-.24-1.758 0-.946.308-1.75.925-2.414-.289-.711-.261-1.508.082-2.39.227-.071.563-.018 1.008.157.446.176.772.327.979.452.207.125.373.23.498.316A8.32 8.32 0 019 4.568c.773 0 1.523.101 2.25.304l.445-.281c.305-.188.664-.36 1.078-.516.414-.156.73-.199.95-.129.351.883.382 1.68.093 2.39.617.665.926 1.47.926 2.415 0 .664-.08 1.252-.24 1.764-.16.511-.367.921-.62 1.23-.255.309-.572.569-.95.78-.38.21-.747.362-1.102.456a8.013 8.013 0 01-1.201.212c.406.351.61.906.61 1.664v2.472c0 .14.048.258.146.351.097.094.252.121.463.082 1.812-.601 3.29-1.685 4.435-3.252C17.427 12.944 18 11.18 18 9.22a8.81 8.81 0 00-1.207-4.517z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
<span class="animate-version">v{{version}}</span>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<footer class="main-footer">
|
||||
<p>
|
||||
Animate.css is a MIT licensed library.
|
||||
You can use it freely, respecting the terms included in the <a href="https://github.com/daneden/animate.css/blob/main/LICENSE" title="license">license file.
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<aside class="motionless__banner">
|
||||
<p class="motionless__paragraph">
|
||||
<b>Hey!</b> It seems that you have animations disabled on your OS, turning Animate.css
|
||||
off.<br />
|
||||
Animate.css supports the
|
||||
<a
|
||||
title="prefers-reduced-motion CSS media feature on MDN"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"
|
||||
>
|
||||
prefers-reduced-motion CSS media feature</a
|
||||
>. You can read more about it
|
||||
<a
|
||||
title="Move Ya! Or maybe, don't, if the user prefers-reduced-motion! on Google Developers"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://developers.google.com/web/updates/2019/03/prefers-reduced-motion"
|
||||
>
|
||||
here</a
|
||||
>.
|
||||
</p>
|
||||
</aside>
|
||||
<script type="module" src="main.mjs"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
.animated {
|
||||
animation-duration: var(--animate-duration);
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.animated.repeat-1 {
|
||||
animation-iteration-count: var(--animate-repeat);
|
||||
}
|
||||
|
||||
.animated.repeat-2 {
|
||||
animation-iteration-count: calc(var(--animate-repeat) * 2);
|
||||
}
|
||||
|
||||
.animated.repeat-3 {
|
||||
animation-iteration-count: calc(var(--animate-repeat) * 3);
|
||||
}
|
||||
|
||||
.animated.delay-1s {
|
||||
animation-delay: var(--animate-delay);
|
||||
}
|
||||
|
||||
.animated.delay-2s {
|
||||
animation-delay: calc(var(--animate-delay) * 2);
|
||||
}
|
||||
|
||||
.animated.delay-3s {
|
||||
animation-delay: calc(var(--animate-delay) * 3);
|
||||
}
|
||||
|
||||
.animated.delay-4s {
|
||||
animation-delay: calc(var(--animate-delay) * 4);
|
||||
}
|
||||
|
||||
.animated.delay-5s {
|
||||
animation-delay: calc(var(--animate-delay) * 5);
|
||||
}
|
||||
|
||||
.animated.faster {
|
||||
animation-duration: calc(var(--animate-duration) / 2);
|
||||
}
|
||||
|
||||
.animated.fast {
|
||||
animation-duration: calc(var(--animate-duration) * 0.8);
|
||||
}
|
||||
|
||||
.animated.slow {
|
||||
animation-duration: calc(var(--animate-duration) * 2);
|
||||
}
|
||||
|
||||
.animated.slower {
|
||||
animation-duration: calc(var(--animate-duration) * 3);
|
||||
}
|
||||
|
||||
@media print, (prefers-reduced-motion: reduce) {
|
||||
.animated {
|
||||
animation-duration: 1ms !important;
|
||||
transition-duration: 1ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
}
|
||||
|
||||
.animated[class*='Out'] {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
:root {
|
||||
--animate-duration: 1s;
|
||||
--animate-delay: 1s;
|
||||
--animate-repeat: 1;
|
||||
}
|
||||
@@ -0,0 +1,131 @@
|
||||
@import '_vars.css';
|
||||
@import '_base.css';
|
||||
|
||||
/* Attention seekers */
|
||||
@import 'attention_seekers/bounce.css';
|
||||
@import 'attention_seekers/flash.css';
|
||||
@import 'attention_seekers/pulse.css';
|
||||
@import 'attention_seekers/rubberBand.css';
|
||||
@import 'attention_seekers/shakeX.css';
|
||||
@import 'attention_seekers/shakeY.css';
|
||||
@import 'attention_seekers/headShake.css';
|
||||
@import 'attention_seekers/swing.css';
|
||||
@import 'attention_seekers/tada.css';
|
||||
@import 'attention_seekers/wobble.css';
|
||||
@import 'attention_seekers/jello.css';
|
||||
@import 'attention_seekers/heartBeat.css';
|
||||
|
||||
/* Back entrances */
|
||||
@import 'back_entrances/backInDown.css';
|
||||
@import 'back_entrances/backInLeft.css';
|
||||
@import 'back_entrances/backInRight.css';
|
||||
@import 'back_entrances/backInUp.css';
|
||||
|
||||
/* Back exits */
|
||||
@import 'back_exits/backOutDown.css';
|
||||
@import 'back_exits/backOutLeft.css';
|
||||
@import 'back_exits/backOutRight.css';
|
||||
@import 'back_exits/backOutUp.css';
|
||||
|
||||
/* Bouncing entrances */
|
||||
@import 'bouncing_entrances/bounceIn.css';
|
||||
@import 'bouncing_entrances/bounceInDown.css';
|
||||
@import 'bouncing_entrances/bounceInLeft.css';
|
||||
@import 'bouncing_entrances/bounceInRight.css';
|
||||
@import 'bouncing_entrances/bounceInUp.css';
|
||||
|
||||
/* Bouncing exits */
|
||||
@import 'bouncing_exits/bounceOut.css';
|
||||
@import 'bouncing_exits/bounceOutDown.css';
|
||||
@import 'bouncing_exits/bounceOutLeft.css';
|
||||
@import 'bouncing_exits/bounceOutRight.css';
|
||||
@import 'bouncing_exits/bounceOutUp.css';
|
||||
|
||||
/* Fading entrances */
|
||||
@import 'fading_entrances/fadeIn.css';
|
||||
@import 'fading_entrances/fadeInDown.css';
|
||||
@import 'fading_entrances/fadeInDownBig.css';
|
||||
@import 'fading_entrances/fadeInLeft.css';
|
||||
@import 'fading_entrances/fadeInLeftBig.css';
|
||||
@import 'fading_entrances/fadeInRight.css';
|
||||
@import 'fading_entrances/fadeInRightBig.css';
|
||||
@import 'fading_entrances/fadeInUp.css';
|
||||
@import 'fading_entrances/fadeInUpBig.css';
|
||||
@import 'fading_entrances/fadeInTopLeft.css';
|
||||
@import 'fading_entrances/fadeInTopRight.css';
|
||||
@import 'fading_entrances/fadeInBottomLeft.css';
|
||||
@import 'fading_entrances/fadeInBottomRight.css';
|
||||
|
||||
/* Fading exits */
|
||||
@import 'fading_exits/fadeOut.css';
|
||||
@import 'fading_exits/fadeOutDown.css';
|
||||
@import 'fading_exits/fadeOutDownBig.css';
|
||||
@import 'fading_exits/fadeOutLeft.css';
|
||||
@import 'fading_exits/fadeOutLeftBig.css';
|
||||
@import 'fading_exits/fadeOutRight.css';
|
||||
@import 'fading_exits/fadeOutRightBig.css';
|
||||
@import 'fading_exits/fadeOutUp.css';
|
||||
@import 'fading_exits/fadeOutUpBig.css';
|
||||
@import 'fading_exits/fadeOutTopLeft.css';
|
||||
@import 'fading_exits/fadeOutTopRight.css';
|
||||
@import 'fading_exits/fadeOutBottomRight.css';
|
||||
@import 'fading_exits/fadeOutBottomLeft.css';
|
||||
|
||||
/* Flippers */
|
||||
@import 'flippers/flip.css';
|
||||
@import 'flippers/flipInX.css';
|
||||
@import 'flippers/flipInY.css';
|
||||
@import 'flippers/flipOutX.css';
|
||||
@import 'flippers/flipOutY.css';
|
||||
|
||||
/* Lightspeed */
|
||||
@import 'lightspeed/lightSpeedInRight.css';
|
||||
@import 'lightspeed/lightSpeedInLeft.css';
|
||||
@import 'lightspeed/lightSpeedOutRight.css';
|
||||
@import 'lightspeed/lightSpeedOutLeft.css';
|
||||
|
||||
/* Rotating entrances */
|
||||
@import 'rotating_entrances/rotateIn.css';
|
||||
@import 'rotating_entrances/rotateInDownLeft.css';
|
||||
@import 'rotating_entrances/rotateInDownRight.css';
|
||||
@import 'rotating_entrances/rotateInUpLeft.css';
|
||||
@import 'rotating_entrances/rotateInUpRight.css';
|
||||
|
||||
/* Rotating exits */
|
||||
@import 'rotating_exits/rotateOut.css';
|
||||
@import 'rotating_exits/rotateOutDownLeft.css';
|
||||
@import 'rotating_exits/rotateOutDownRight.css';
|
||||
@import 'rotating_exits/rotateOutUpLeft.css';
|
||||
@import 'rotating_exits/rotateOutUpRight.css';
|
||||
|
||||
/* Specials */
|
||||
@import 'specials/hinge.css';
|
||||
@import 'specials/jackInTheBox.css';
|
||||
@import 'specials/rollIn.css';
|
||||
@import 'specials/rollOut.css';
|
||||
|
||||
/* Zooming entrances */
|
||||
@import 'zooming_entrances/zoomIn.css';
|
||||
@import 'zooming_entrances/zoomInDown.css';
|
||||
@import 'zooming_entrances/zoomInLeft.css';
|
||||
@import 'zooming_entrances/zoomInRight.css';
|
||||
@import 'zooming_entrances/zoomInUp.css';
|
||||
|
||||
/* Zooming exits */
|
||||
@import 'zooming_exits/zoomOut.css';
|
||||
@import 'zooming_exits/zoomOutDown.css';
|
||||
@import 'zooming_exits/zoomOutLeft.css';
|
||||
@import 'zooming_exits/zoomOutRight.css';
|
||||
@import 'zooming_exits/zoomOutUp.css';
|
||||
|
||||
/* Sliding entrances */
|
||||
@import 'sliding_entrances/slideInDown.css';
|
||||
@import 'sliding_entrances/slideInLeft.css';
|
||||
@import 'sliding_entrances/slideInRight.css';
|
||||
@import 'sliding_entrances/slideInUp.css';
|
||||
|
||||
/* Sliding exits */
|
||||
@import 'sliding_exits/slideOutDown.css';
|
||||
@import 'sliding_exits/slideOutLeft.css';
|
||||
@import 'sliding_exits/slideOutRight.css';
|
||||
@import 'sliding_exits/slideOutUp.css';
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
@keyframes flash {
|
||||
from,
|
||||
50%,
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25%,
|
||||
75% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flash {
|
||||
animation-name: flash;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
animation-name: fadeOut;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutDown {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutDown {
|
||||
animation-name: fadeOutDown;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutDownBig {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutDownBig {
|
||||
animation-name: fadeOutDownBig;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutLeft {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutLeft {
|
||||
animation-name: fadeOutLeft;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutLeftBig {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(-2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutLeftBig {
|
||||
animation-name: fadeOutLeftBig;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutRight {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutRight {
|
||||
animation-name: fadeOutRight;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutRightBig {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(2000px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutRightBig {
|
||||
animation-name: fadeOutRightBig;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutUp {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutUp {
|
||||
animation-name: fadeOutUp;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
@keyframes fadeOutUpBig {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -2000px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOutUpBig {
|
||||
animation-name: fadeOutUpBig;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Loaded 100 of 400 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user