mirror of
https://github.com/animate-css/animate.css.git
synced 2024-11-17 17:45:17 +01:00
add DOM Style version
This commit is contained in:
zakarialaoui10
parent
3f8ab233db
commit
b2c5be9e9c
25 changed files with 8717 additions and 638 deletions
1637
animate-css.cjs
Normal file
1637
animate-css.cjs
Normal file
File diff suppressed because it is too large
Load diff
1774
animate-css.js
Normal file
1774
animate-css.js
Normal file
File diff suppressed because it is too large
Load diff
1003
animate-css.min.js
vendored
Normal file
1003
animate-css.min.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
1749
animate-css.mjs
Normal file
1749
animate-css.mjs
Normal file
File diff suppressed because it is too large
Load diff
2
animate.css
vendored
2
animate.css
vendored
|
|
@ -5,7 +5,7 @@
|
||||||
* Version - 4.1.1
|
* Version - 4.1.1
|
||||||
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
|
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
|
||||||
*
|
*
|
||||||
* Copyright (c) 2022 Animate.css
|
* Copyright (c) 2024 Animate.css
|
||||||
*/
|
*/
|
||||||
:root {
|
:root {
|
||||||
--animate-duration: 1s;
|
--animate-duration: 1s;
|
||||||
|
|
|
||||||
18
js/index.js
Normal file
18
js/index.js
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
module.exports = {
|
||||||
|
...require('./keyframes/attention-seekers.js'),
|
||||||
|
...require('./keyframes/back-in.js'),
|
||||||
|
...require('./keyframes/back-out.js'),
|
||||||
|
...require('./keyframes/bounce-in.js'),
|
||||||
|
...require('./keyframes/bounce-out.js'),
|
||||||
|
...require('./keyframes/fade-in.js'),
|
||||||
|
...require('./keyframes/fade-out.js'),
|
||||||
|
...require('./keyframes/flippers.js'),
|
||||||
|
...require('./keyframes/lightspeed.js'),
|
||||||
|
...require('./keyframes/rotate-in.js'),
|
||||||
|
...require('./keyframes/rotate-out.js'),
|
||||||
|
...require('./keyframes/slide-in.js'),
|
||||||
|
...require('./keyframes/slide-out.js'),
|
||||||
|
...require('./keyframes/specials.js'),
|
||||||
|
...require('./keyframes/zoom-in.js'),
|
||||||
|
...require('./keyframes/zoom-out.js'),
|
||||||
|
};
|
||||||
256
js/keyframes/attention-seekers.js
Normal file
256
js/keyframes/attention-seekers.js
Normal file
|
|
@ -0,0 +1,256 @@
|
||||||
|
const bounce = (duration, iterations = 1, easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{transform: 'translate3d(0, -30px, 0) scaleY(1.1)', offset: 0.4},
|
||||||
|
{transform: 'translate3d(0, -15px, 0) scaleY(1.05)', offset: 0.7},
|
||||||
|
{transform: 'translate3d(0, 0, 0) scaleY(0.95)', offset: 0.8},
|
||||||
|
{transform: 'translate3d(0, -4px, 0) scaleY(1.02)', offset: 0.9},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const flash = (duration = 1000, iterations = Infinity, easing = 'linear') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, offset: 0},
|
||||||
|
{opacity: 0, offset: 0.25},
|
||||||
|
{opacity: 1, offset: 0.5},
|
||||||
|
{opacity: 0, offset: 0.75},
|
||||||
|
{opacity: 1, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const headShake = (duration = 1000, iterations = 1, easing = 'ease-in-out') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translateX(0) rotateY(0deg)', offset: 0},
|
||||||
|
{transform: 'translateX(-6px) rotateY(-9deg)', offset: 0.065},
|
||||||
|
{transform: 'translateX(5px) rotateY(7deg)', offset: 0.185},
|
||||||
|
{transform: 'translateX(-3px) rotateY(-5deg)', offset: 0.315},
|
||||||
|
{transform: 'translateX(2px) rotateY(3deg)', offset: 0.435},
|
||||||
|
{transform: 'translateX(0) rotateY(0deg)', offset: 0.5},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const heartBeat = (duration = 1000, iterations = Infinity, easing = 'ease-in-out') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'scale(1)', offset: 0},
|
||||||
|
{transform: 'scale(1.3)', offset: 0.14},
|
||||||
|
{transform: 'scale(1)', offset: 0.28},
|
||||||
|
{transform: 'scale(1.3)', offset: 0.42},
|
||||||
|
{transform: 'scale(1)', offset: 0.7},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration: duration * 1.3, // To Fix
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const jello = (duration = 1000, iterations = Infinity, easing = 'ease-in-out') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{transform: 'skewX(-12.5deg) skewY(-12.5deg)', offset: 0.222},
|
||||||
|
{transform: 'skewX(6.25deg) skewY(6.25deg)', offset: 0.333},
|
||||||
|
{transform: 'skewX(-3.125deg) skewY(-3.125deg)', offset: 0.444},
|
||||||
|
{transform: 'skewX(1.5625deg) skewY(1.5625deg)', offset: 0.555},
|
||||||
|
{transform: 'skewX(-0.78125deg) skewY(-0.78125deg)', offset: 0.666},
|
||||||
|
{transform: 'skewX(0.390625deg) skewY(0.390625deg)', offset: 0.777},
|
||||||
|
{transform: 'skewX(-0.1953125deg) skewY(-0.1953125deg)', offset: 0.888},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const pulse = (duration = 1000, iterations = Infinity, easing = 'ease-in-out') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'scale3d(1, 1, 1)', offset: 0},
|
||||||
|
{transform: 'scale3d(1.05, 1.05, 1.05)', offset: 0.5},
|
||||||
|
{transform: 'scale3d(1, 1, 1)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rubberBand = (duration = 1000, iterations = 1, easing = 'ease-in-out') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'scale3d(1, 1, 1)', offset: 0},
|
||||||
|
{transform: 'scale3d(1.25, 0.75, 1)', offset: 0.3},
|
||||||
|
{transform: 'scale3d(0.75, 1.25, 1)', offset: 0.4},
|
||||||
|
{transform: 'scale3d(1.15, 0.85, 1)', offset: 0.5},
|
||||||
|
{transform: 'scale3d(0.95, 1.05, 1)', offset: 0.65},
|
||||||
|
{transform: 'scale3d(1.05, 0.95, 1)', offset: 0.75},
|
||||||
|
{transform: 'scale3d(1, 1, 1)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const shake = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{transform: 'translate3d(-10px, 0, 0)', offset: 0.1},
|
||||||
|
{transform: 'translate3d(10px, 0, 0)', offset: 0.2},
|
||||||
|
{transform: 'translate3d(-10px, 0, 0)', offset: 0.3},
|
||||||
|
{transform: 'translate3d(10px, 0, 0)', offset: 0.4},
|
||||||
|
{transform: 'translate3d(-10px, 0, 0)', offset: 0.5},
|
||||||
|
{transform: 'translate3d(10px, 0, 0)', offset: 0.6},
|
||||||
|
{transform: 'translate3d(-10px, 0, 0)', offset: 0.7},
|
||||||
|
{transform: 'translate3d(10px, 0, 0)', offset: 0.8},
|
||||||
|
{transform: 'translate3d(-10px, 0, 0)', offset: 0.9},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const shakeX = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{transform: 'translate3d(-10px, 0, 0)', offset: 0.1},
|
||||||
|
{transform: 'translate3d(10px, 0, 0)', offset: 0.2},
|
||||||
|
{transform: 'translate3d(-10px, 0, 0)', offset: 0.3},
|
||||||
|
{transform: 'translate3d(10px, 0, 0)', offset: 0.4},
|
||||||
|
{transform: 'translate3d(-10px, 0, 0)', offset: 0.5},
|
||||||
|
{transform: 'translate3d(10px, 0, 0)', offset: 0.6},
|
||||||
|
{transform: 'translate3d(-10px, 0, 0)', offset: 0.7},
|
||||||
|
{transform: 'translate3d(10px, 0, 0)', offset: 0.8},
|
||||||
|
{transform: 'translate3d(-10px, 0, 0)', offset: 0.9},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const shakeY = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{transform: 'translate3d(0, -10px, 0)', offset: 0.1},
|
||||||
|
{transform: 'translate3d(0, 10px, 0)', offset: 0.2},
|
||||||
|
{transform: 'translate3d(0, -10px, 0)', offset: 0.3},
|
||||||
|
{transform: 'translate3d(0, 10px, 0)', offset: 0.4},
|
||||||
|
{transform: 'translate3d(0, -10px, 0)', offset: 0.5},
|
||||||
|
{transform: 'translate3d(0, 10px, 0)', offset: 0.6},
|
||||||
|
{transform: 'translate3d(0, -10px, 0)', offset: 0.7},
|
||||||
|
{transform: 'translate3d(0, 10px, 0)', offset: 0.8},
|
||||||
|
{transform: 'translate3d(0, -10px, 0)', offset: 0.9},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const swing = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'rotate3d(0, 0, 1, 0deg)', offset: 0}, // Equivalent to `from`
|
||||||
|
{transform: 'rotate3d(0, 0, 1, 15deg)', offset: 0.2},
|
||||||
|
{transform: 'rotate3d(0, 0, 1, -10deg)', offset: 0.4},
|
||||||
|
{transform: 'rotate3d(0, 0, 1, 5deg)', offset: 0.6},
|
||||||
|
{transform: 'rotate3d(0, 0, 1, -5deg)', offset: 0.8},
|
||||||
|
{transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1}, // Equivalent to `to`
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const tada = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'scale3d(1, 1, 1)', offset: 0},
|
||||||
|
{transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)', offset: 0.1},
|
||||||
|
{transform: 'scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)', offset: 0.2},
|
||||||
|
{transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.3},
|
||||||
|
{transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.4},
|
||||||
|
{transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.5},
|
||||||
|
{transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.6},
|
||||||
|
{transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.7},
|
||||||
|
{transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)', offset: 0.8},
|
||||||
|
{transform: 'scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)', offset: 0.9},
|
||||||
|
{transform: 'scale3d(1, 1, 1)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const wobble = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 0}, // Equivalent to `from`
|
||||||
|
{transform: 'translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)', offset: 0.15},
|
||||||
|
{transform: 'translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)', offset: 0.3},
|
||||||
|
{transform: 'translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)', offset: 0.45},
|
||||||
|
{transform: 'translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)', offset: 0.6},
|
||||||
|
{transform: 'translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)', offset: 0.75},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1}, // Equivalent to `to`
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
bounce,
|
||||||
|
flash,
|
||||||
|
headShake,
|
||||||
|
heartBeat,
|
||||||
|
jello,
|
||||||
|
pulse,
|
||||||
|
rubberBand,
|
||||||
|
shake,
|
||||||
|
shakeX,
|
||||||
|
shakeY,
|
||||||
|
swing,
|
||||||
|
tada,
|
||||||
|
wobble,
|
||||||
|
};
|
||||||
62
js/keyframes/back-in.js
Normal file
62
js/keyframes/back-in.js
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
const backInDown = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translateY(-1200px) scale(0.7)', opacity: 0.7, offset: 0},
|
||||||
|
{transform: 'translateY(0px) scale(0.7)', opacity: 0.7, offset: 0.8},
|
||||||
|
{transform: 'scale(1)', opacity: 1, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const backInLeft = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translateX(-2000px) scale(0.7)', opacity: 0.7, offset: 0},
|
||||||
|
{transform: 'translateX(0px) scale(0.7)', opacity: 0.7, offset: 0.8},
|
||||||
|
{transform: 'scale(1)', opacity: 1, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const backInRight = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translateX(2000px) scale(0.7)', opacity: 0.7, offset: 0},
|
||||||
|
{transform: 'translateX(0px) scale(0.7)', opacity: 0.7, offset: 0.8},
|
||||||
|
{transform: 'scale(1)', opacity: 1, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const backInUp = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translateY(1200px) scale(0.7)', opacity: 0.7, offset: 0},
|
||||||
|
{transform: 'translateY(0px) scale(0.7)', opacity: 0.7, offset: 0.8},
|
||||||
|
{transform: 'scale(1)', opacity: 1, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
backInDown,
|
||||||
|
backInLeft,
|
||||||
|
backInRight,
|
||||||
|
backInUp,
|
||||||
|
};
|
||||||
62
js/keyframes/back-out.js
Normal file
62
js/keyframes/back-out.js
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
const backOutDown = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'scale(1)', opacity: 1, offset: 0},
|
||||||
|
{transform: 'translateY(0px) scale(0.7)', opacity: 0.7, offset: 0.2},
|
||||||
|
{transform: 'translateY(700px) scale(0.7)', opacity: 0.7, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const backOutLeft = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'scale(1)', opacity: 1, offset: 0},
|
||||||
|
{transform: 'translateX(0px) scale(0.7)', opacity: 0.7, offset: 0.2},
|
||||||
|
{transform: 'translateX(-2000px) scale(0.7)', opacity: 0.7, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const backOutRight = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'scale(1)', opacity: 1, offset: 0},
|
||||||
|
{transform: 'translateX(0px) scale(0.7)', opacity: 0.7, offset: 0.2},
|
||||||
|
{transform: 'translateX(2000px) scale(0.7)', opacity: 0.7, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const backOutUp = (duration = 1000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'scale(1)', opacity: 1, offset: 0},
|
||||||
|
{transform: 'translateY(0px) scale(0.7)', opacity: 0.7, offset: 0.2},
|
||||||
|
{transform: 'translateY(-700px) scale(0.7)', opacity: 0.7, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
backOutDown,
|
||||||
|
backOutLeft,
|
||||||
|
backOutRight,
|
||||||
|
backOutUp,
|
||||||
|
};
|
||||||
108
js/keyframes/bounce-in.js
Normal file
108
js/keyframes/bounce-in.js
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
const bounceIn = (
|
||||||
|
duration = 1000,
|
||||||
|
easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'scale3d(0.3, 0.3, 0.3)', offset: 0},
|
||||||
|
{transform: 'scale3d(1.1, 1.1, 1.1)', offset: 0.2},
|
||||||
|
{transform: 'scale3d(0.9, 0.9, 0.9)', offset: 0.4},
|
||||||
|
{opacity: 1, transform: 'scale3d(1.03, 1.03, 1.03)', offset: 0.6},
|
||||||
|
{transform: 'scale3d(0.97, 0.97, 0.97)', offset: 0.8},
|
||||||
|
{opacity: 1, transform: 'scale3d(1, 1, 1)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const bounceInDown = (
|
||||||
|
duration = 1000,
|
||||||
|
easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(0, -3000px, 0) scaleY(3)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 25px, 0) scaleY(0.9)', offset: 0.6},
|
||||||
|
{transform: 'translate3d(0, -10px, 0) scaleY(0.95)', offset: 0.75},
|
||||||
|
{transform: 'translate3d(0, 5px, 0) scaleY(0.985)', offset: 0.9},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const bounceInLeft = (
|
||||||
|
duration = 1000,
|
||||||
|
easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(-3000px, 0, 0) scaleX(3)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(25px, 0, 0) scaleX(1)', offset: 0.6},
|
||||||
|
{transform: 'translate3d(-10px, 0, 0) scaleX(0.98)', offset: 0.75},
|
||||||
|
{transform: 'translate3d(5px, 0, 0) scaleX(0.995)', offset: 0.9},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const bounceInRight = (
|
||||||
|
duration = 1000,
|
||||||
|
easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(3000px, 0, 0) scaleX(3)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(-25px, 0, 0) scaleX(1)', offset: 0.6},
|
||||||
|
{transform: 'translate3d(10px, 0, 0) scaleX(0.98)', offset: 0.75},
|
||||||
|
{transform: 'translate3d(-5px, 0, 0) scaleX(0.995)', offset: 0.9},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const bounceInUp = (
|
||||||
|
duration = 1000,
|
||||||
|
easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(0, 3000px, 0) scaleY(5)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, -20px, 0) scaleY(0.9)', offset: 0.6},
|
||||||
|
{transform: 'translate3d(0, 10px, 0) scaleY(0.95)', offset: 0.75},
|
||||||
|
{transform: 'translate3d(0, -5px, 0) scaleY(0.985)', offset: 0.9},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
bounceIn,
|
||||||
|
bounceInDown,
|
||||||
|
bounceInLeft,
|
||||||
|
bounceInRight,
|
||||||
|
bounceInUp,
|
||||||
|
};
|
||||||
95
js/keyframes/bounce-out.js
Normal file
95
js/keyframes/bounce-out.js
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
const bounceOut = (
|
||||||
|
duration = 1000,
|
||||||
|
easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'scale3d(0.9, 0.9, 0.9)', offset: 0.2},
|
||||||
|
{opacity: 1, transform: 'scale3d(1.1, 1.1, 1.1)', offset: 0.55},
|
||||||
|
{opacity: 0, transform: 'scale3d(0.3, 0.3, 0.3)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const bounceOutDown = (
|
||||||
|
duration = 1000,
|
||||||
|
easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, 10px, 0) scaleY(0.985)', offset: 0.2},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, -20px, 0) scaleY(0.9)', offset: 0.45},
|
||||||
|
{opacity: 0, transform: 'translate3d(0, 2000px, 0) scaleY(3)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const bounceOutLeft = (
|
||||||
|
duration = 1000,
|
||||||
|
easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(20px, 0, 0) scaleX(0.9)', offset: 0.2},
|
||||||
|
{opacity: 0, transform: 'translate3d(-2000px, 0, 0) scaleX(2)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const bounceOutRight = (
|
||||||
|
duration = 1000,
|
||||||
|
easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(-20px, 0, 0) scaleX(0.9)', offset: 0.2},
|
||||||
|
{opacity: 0, transform: 'translate3d(2000px, 0, 0) scaleX(2)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const bounceOutUp = (
|
||||||
|
duration = 1000,
|
||||||
|
easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, -10px, 0) scaleY(0.985)', offset: 0.2},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 20px, 0) scaleY(0.9)', offset: 0.4},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 20px, 0) scaleY(0.9)', offset: 0.45},
|
||||||
|
{opacity: 0, transform: 'translate3d(0, -2000px, 0) scaleY(3)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
bounceOutDown,
|
||||||
|
bounceOutLeft,
|
||||||
|
bounceOutRight,
|
||||||
|
bounceOutUp,
|
||||||
|
};
|
||||||
184
js/keyframes/fade-in.js
Normal file
184
js/keyframes/fade-in.js
Normal file
|
|
@ -0,0 +1,184 @@
|
||||||
|
const fadeIn = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, offset: 0},
|
||||||
|
{opacity: 1, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeInBottomLeft = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(-100%, 100%, 0)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeInBottomRight = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(100%, 100%, 0)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeInDown = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(0, -100%, 0)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeInDownBig = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(0, -2000px, 0)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeInLeft = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(-100%, 0, 0)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeInLeftBig = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(-2000px, 0, 0)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeInRight = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(100%, 0, 0)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeInRightBig = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(2000px, 0, 0)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeInTopLeft = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(-100%, -100%, 0)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeInTopRight = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(100%, -100%, 0)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeInUp = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(0, 100%, 0)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeInUpBig = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(0, 2000px, 0)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
fadeIn,
|
||||||
|
fadeInBottomLeft,
|
||||||
|
fadeInBottomRight,
|
||||||
|
fadeInDown,
|
||||||
|
fadeInDownBig,
|
||||||
|
fadeInLeft,
|
||||||
|
fadeInLeftBig,
|
||||||
|
fadeInRight,
|
||||||
|
fadeInRightBig,
|
||||||
|
fadeInTopLeft,
|
||||||
|
fadeInTopRight,
|
||||||
|
fadeInUp,
|
||||||
|
fadeInUpBig,
|
||||||
|
};
|
||||||
184
js/keyframes/fade-out.js
Normal file
184
js/keyframes/fade-out.js
Normal file
|
|
@ -0,0 +1,184 @@
|
||||||
|
const fadeOut = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, offset: 0},
|
||||||
|
{opacity: 0, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeOutBottomLeft = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{opacity: 0, transform: 'translate3d(-100%, 100%, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeOutBottomRight = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{opacity: 0, transform: 'translate3d(100%, 100%, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeOutDown = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{opacity: 0, transform: 'translate3d(0, 100%, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeOutDownBig = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{opacity: 0, transform: 'translate3d(0, 2000px, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeOutLeft = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{opacity: 0, transform: 'translate3d(-100%, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeOutLeftBig = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{opacity: 0, transform: 'translate3d(-2000px, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeOutRight = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{opacity: 0, transform: 'translate3d(100%, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeOutRightBig = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{opacity: 0, transform: 'translate3d(2000px, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeOutTopLeft = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{opacity: 0, transform: 'translate3d(-100%, -100%, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeOutTopRight = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{opacity: 0, transform: 'translate3d(100%, -100%, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeOutUp = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{opacity: 0, transform: 'translate3d(0, -100%, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const fadeOutUpBig = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{opacity: 0, transform: 'translate3d(0, -2000px, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
fadeOut,
|
||||||
|
fadeOutBottomLeft,
|
||||||
|
fadeOutBottomRight,
|
||||||
|
fadeOutDown,
|
||||||
|
fadeOutDownBig,
|
||||||
|
fadeOutLeft,
|
||||||
|
fadeOutLeftBig,
|
||||||
|
fadeOutRight,
|
||||||
|
fadeOutRightBig,
|
||||||
|
fadeOutTopLeft,
|
||||||
|
fadeOutTopRight,
|
||||||
|
fadeOutUp,
|
||||||
|
fadeOutUpBig,
|
||||||
|
};
|
||||||
118
js/keyframes/flippers.js
Normal file
118
js/keyframes/flippers.js
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
const flip = (duration = 1000, easing = 'ease-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{
|
||||||
|
transform:
|
||||||
|
'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg)',
|
||||||
|
offset: 0,
|
||||||
|
easing: 'ease-out',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
transform:
|
||||||
|
'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg)',
|
||||||
|
offset: 0.4,
|
||||||
|
easing: 'ease-out',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
transform:
|
||||||
|
'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg)',
|
||||||
|
offset: 0.5,
|
||||||
|
easing: 'ease-in',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
transform:
|
||||||
|
'perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)',
|
||||||
|
offset: 0.8,
|
||||||
|
easing: 'ease-in',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
transform:
|
||||||
|
'perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg)',
|
||||||
|
offset: 1,
|
||||||
|
easing: 'ease-in',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const flipInX = (duration = 1000, easing = 'ease-in', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{
|
||||||
|
transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)',
|
||||||
|
opacity: 0,
|
||||||
|
offset: 0,
|
||||||
|
easing: 'ease-in',
|
||||||
|
},
|
||||||
|
{transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)', offset: 0.4, easing: 'ease-in'},
|
||||||
|
{transform: 'perspective(400px) rotate3d(1, 0, 0, 10deg)', opacity: 1, offset: 0.6},
|
||||||
|
{transform: 'perspective(400px) rotate3d(1, 0, 0, -5deg)', offset: 0.8},
|
||||||
|
{transform: 'perspective(400px)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const flipInY = (duration = 1000, easing = 'ease-in', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{
|
||||||
|
transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)',
|
||||||
|
opacity: 0,
|
||||||
|
offset: 0,
|
||||||
|
easing: 'ease-in',
|
||||||
|
},
|
||||||
|
{transform: 'perspective(400px) rotate3d(0, 1, 0, -20deg)', offset: 0.4, easing: 'ease-in'},
|
||||||
|
{transform: 'perspective(400px) rotate3d(0, 1, 0, 10deg)', opacity: 1, offset: 0.6},
|
||||||
|
{transform: 'perspective(400px) rotate3d(0, 1, 0, -5deg)', offset: 0.8},
|
||||||
|
{transform: 'perspective(400px)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const flipOutX = (duration = 1000, easing = 'ease-in', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'perspective(400px)', offset: 0},
|
||||||
|
{transform: 'perspective(400px) rotate3d(1, 0, 0, -20deg)', opacity: 1, offset: 0.3},
|
||||||
|
{transform: 'perspective(400px) rotate3d(1, 0, 0, 90deg)', opacity: 0, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration: duration * 0.75,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const flipOutY = (duration = 1000, easing = 'ease-in', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'perspective(400px)', offset: 0},
|
||||||
|
{transform: 'perspective(400px) rotate3d(0, 1, 0, -15deg)', opacity: 1, offset: 0.3},
|
||||||
|
{transform: 'perspective(400px) rotate3d(0, 1, 0, 90deg)', opacity: 0, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration: duration * 0.75,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
flip,
|
||||||
|
flipInX,
|
||||||
|
flipInY,
|
||||||
|
flipOutX,
|
||||||
|
flipOutY,
|
||||||
|
};
|
||||||
62
js/keyframes/lightspeed.js
Normal file
62
js/keyframes/lightspeed.js
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
const lightSpeedInLeft = (duration = 1000, easing = 'ease-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(-100%, 0, 0) skewX(30deg)', opacity: 0, offset: 0},
|
||||||
|
{transform: 'skewX(-20deg)', opacity: 1, offset: 0.6},
|
||||||
|
{transform: 'skewX(5deg)', offset: 0.8},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const lightSpeedInRight = (duration = 1000, easing = 'ease-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(100%, 0, 0) skewX(-30deg)', opacity: 0, offset: 0},
|
||||||
|
{transform: 'skewX(20deg)', opacity: 1, offset: 0.6},
|
||||||
|
{transform: 'skewX(-5deg)', offset: 0.8},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const lightSpeedOutLeft = (duration = 1000, easing = 'ease-in', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, offset: 0},
|
||||||
|
{transform: 'translate3d(-100%, 0, 0) skewX(-30deg)', opacity: 0, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const lightSpeedOutRight = (duration = 1000, easing = 'ease-in', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, offset: 0},
|
||||||
|
{transform: 'translate3d(100%, 0, 0) skewX(30deg)', opacity: 0, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
lightSpeedInLeft,
|
||||||
|
lightSpeedInRight,
|
||||||
|
lightSpeedOutLeft,
|
||||||
|
lightSpeedOutRight,
|
||||||
|
};
|
||||||
72
js/keyframes/rotate-in.js
Normal file
72
js/keyframes/rotate-in.js
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
const rotateIn = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'rotate3d(0, 0, 1, -200deg)', opacity: 0, offset: 0},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', opacity: 1, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rotateInDownLeft = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'rotate3d(0, 0, 1, -45deg)', opacity: 0, offset: 0},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', opacity: 1, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rotateInDownRight = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'rotate3d(0, 0, 1, 45deg)', opacity: 0, offset: 0},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', opacity: 1, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rotateInUpLeft = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'rotate3d(0, 0, 1, 45deg)', opacity: 0, offset: 0},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', opacity: 1, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rotateInUpRight = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'rotate3d(0, 0, 1, -90deg)', opacity: 0, offset: 0},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', opacity: 1, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
rotateIn,
|
||||||
|
rotateInDownLeft,
|
||||||
|
rotateInDownRight,
|
||||||
|
rotateInUpLeft,
|
||||||
|
rotateInUpRight,
|
||||||
|
};
|
||||||
72
js/keyframes/rotate-out.js
Normal file
72
js/keyframes/rotate-out.js
Normal file
|
|
@ -0,0 +1,72 @@
|
||||||
|
const rotateOut = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, offset: 0},
|
||||||
|
{transform: 'rotate3d(0, 0, 1, 200deg)', opacity: 0, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rotateOutDownLeft = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, offset: 0},
|
||||||
|
{transform: 'rotate3d(0, 0, 1, 45deg)', opacity: 0, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rotateOutDownRight = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, offset: 0},
|
||||||
|
{transform: 'rotate3d(0, 0, 1, -45deg)', opacity: 0, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rotateOutUpLeft = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, offset: 0},
|
||||||
|
{transform: 'rotate3d(0, 0, 1, -45deg)', opacity: 0, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rotateOutUpRight = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, offset: 0},
|
||||||
|
{transform: 'rotate3d(0, 0, 1, 90deg)', opacity: 0, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
rotateOut,
|
||||||
|
rotateOutDownLeft,
|
||||||
|
rotateOutDownRight,
|
||||||
|
rotateOutUpLeft,
|
||||||
|
rotateOutUpRight,
|
||||||
|
};
|
||||||
58
js/keyframes/slide-in.js
Normal file
58
js/keyframes/slide-in.js
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
const slideInDown = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, -100%, 0)', visibility: 'visible', offset: 0},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const slideInLeft = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(-100%, 0, 0)', visibility: 'visible', offset: 0},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const slideInRight = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(100%, 0, 0)', visibility: 'visible', offset: 0},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const slideInUp = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, 100%, 0)', visibility: 'visible', offset: 0},
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
slideInDown,
|
||||||
|
slideInLeft,
|
||||||
|
slideInRight,
|
||||||
|
slideInUp,
|
||||||
|
};
|
||||||
58
js/keyframes/slide-out.js
Normal file
58
js/keyframes/slide-out.js
Normal file
|
|
@ -0,0 +1,58 @@
|
||||||
|
const slideOutDown = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{visibility: 'hidden', transform: 'translate3d(0, 100%, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const slideOutLeft = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{visibility: 'hidden', transform: 'translate3d(-100%, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const slideOutRight = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{visibility: 'hidden', transform: 'translate3d(100%, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const slideOutUp = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||||||
|
{visibility: 'hidden', transform: 'translate3d(0, -100%, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
slideOutDown,
|
||||||
|
slideOutLeft,
|
||||||
|
slideOutRight,
|
||||||
|
slideOutUp,
|
||||||
|
};
|
||||||
79
js/keyframes/specials.js
Normal file
79
js/keyframes/specials.js
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
const hinge = (duration = 2000, easing = 'ease-in-out', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{offset: 0, animationTimingFunction: easing},
|
||||||
|
{transform: 'rotate3d(0, 0, 1, 80deg)', offset: 0.2, animationTimingFunction: easing},
|
||||||
|
{
|
||||||
|
transform: 'rotate3d(0, 0, 1, 60deg)',
|
||||||
|
offset: 0.4,
|
||||||
|
opacity: 1,
|
||||||
|
animationTimingFunction: easing,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
transform: 'rotate3d(0, 0, 1, 60deg)',
|
||||||
|
offset: 0.6,
|
||||||
|
opacity: 1,
|
||||||
|
animationTimingFunction: easing,
|
||||||
|
},
|
||||||
|
{transform: 'rotate3d(0, 0, 1, 80deg)', offset: 0.8, animationTimingFunction: easing},
|
||||||
|
{transform: 'translate3d(0, 700px, 0)', opacity: 0, offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const jackInTheBox = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{
|
||||||
|
opacity: 0,
|
||||||
|
transform: 'scale(0.1) rotate(30deg)',
|
||||||
|
transformOrigin: 'center bottom',
|
||||||
|
offset: 0,
|
||||||
|
},
|
||||||
|
{transform: 'rotate(-10deg)', offset: 0.5},
|
||||||
|
{transform: 'rotate(3deg)', offset: 0.7},
|
||||||
|
{opacity: 1, transform: 'scale(1)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rollIn = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rollOut = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg)', offset: 0},
|
||||||
|
{opacity: 0, transform: 'translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
hinge,
|
||||||
|
jackInTheBox,
|
||||||
|
rollIn,
|
||||||
|
rollOut,
|
||||||
|
};
|
||||||
149
js/keyframes/zoom-in.js
Normal file
149
js/keyframes/zoom-in.js
Normal file
|
|
@ -0,0 +1,149 @@
|
||||||
|
const zoomIn = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 0, transform: 'scale3d(0.3, 0.3, 0.3)', offset: 0},
|
||||||
|
{opacity: 1, transform: 'scale3d(1, 1, 1)', offset: 0.5},
|
||||||
|
{opacity: 1, transform: 'scale3d(1, 1, 1)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const zoomInDown = (
|
||||||
|
duration = 1000,
|
||||||
|
easingIn = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
|
||||||
|
easingOut = 'cubic-bezier(0.175, 0.885, 0.32, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{
|
||||||
|
opacity: 0,
|
||||||
|
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0)',
|
||||||
|
offset: 0,
|
||||||
|
easing: easingIn,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)',
|
||||||
|
offset: 0.6,
|
||||||
|
easing: easingOut,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)',
|
||||||
|
offset: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const zoomInLeft = (
|
||||||
|
duration = 1000,
|
||||||
|
easingIn = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
|
||||||
|
easingOut = 'cubic-bezier(0.175, 0.885, 0.32, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{
|
||||||
|
opacity: 0,
|
||||||
|
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0)',
|
||||||
|
offset: 0,
|
||||||
|
easing: easingIn,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0)',
|
||||||
|
offset: 0.6,
|
||||||
|
easing: easingOut,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)',
|
||||||
|
offset: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const zoomInRight = (
|
||||||
|
duration = 1000,
|
||||||
|
easingIn = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
|
||||||
|
easingOut = 'cubic-bezier(0.175, 0.885, 0.32, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{
|
||||||
|
opacity: 0,
|
||||||
|
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0)',
|
||||||
|
offset: 0,
|
||||||
|
easing: easingIn,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0)',
|
||||||
|
offset: 0.6,
|
||||||
|
easing: easingOut,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)',
|
||||||
|
offset: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const zoomInUp = (
|
||||||
|
duration = 1000,
|
||||||
|
easingIn = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
|
||||||
|
easingOut = 'cubic-bezier(0.175, 0.885, 0.32, 1)',
|
||||||
|
iterations = 1,
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{
|
||||||
|
opacity: 0,
|
||||||
|
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)',
|
||||||
|
offset: 0,
|
||||||
|
easing: easingIn,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
|
||||||
|
offset: 0.6,
|
||||||
|
easing: easingOut,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)',
|
||||||
|
offset: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
zoomIn,
|
||||||
|
zoomInDown,
|
||||||
|
zoomInLeft,
|
||||||
|
zoomInRight,
|
||||||
|
zoomInUp,
|
||||||
|
};
|
||||||
106
js/keyframes/zoom-out.js
Normal file
106
js/keyframes/zoom-out.js
Normal file
|
|
@ -0,0 +1,106 @@
|
||||||
|
const zoomOut = (duration = 1000, iterations = 1, easing = 'ease') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
transform: 'scale3d(1, 1, 1)',
|
||||||
|
offset: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
opacity: 0,
|
||||||
|
transform: 'scale3d(0.3, 0.3, 0.3)',
|
||||||
|
offset: 0.5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
opacity: 0,
|
||||||
|
transform: 'scale3d(0.3, 0.3, 0.3)',
|
||||||
|
offset: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const zoomOutDown = (
|
||||||
|
duration = 1000,
|
||||||
|
iterations = 1,
|
||||||
|
easingIn = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
|
||||||
|
easingOut = 'cubic-bezier(0.175, 0.885, 0.32, 1)',
|
||||||
|
) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{
|
||||||
|
opacity: 1,
|
||||||
|
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
|
||||||
|
offset: 0.4,
|
||||||
|
easing: easingIn,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
opacity: 0,
|
||||||
|
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0)',
|
||||||
|
offset: 1,
|
||||||
|
easing: easingOut,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const zoomOutLeft = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)', offset: 0.4},
|
||||||
|
{opacity: 0, transform: 'scale(0.1) translate3d(-2000px, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
transformOrigin: 'left center',
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const zoomOutRight = (duration = 1000, easing = 'linear', iterations = 1) => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)', offset: 0.4},
|
||||||
|
{opacity: 0, transform: 'scale(0.1) translate3d(2000px, 0, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
transformOrigin: 'right center',
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const zoomOutUp = (duration = 1000, iterations = 1, easing = 'linear') => {
|
||||||
|
return {
|
||||||
|
keyframes: [
|
||||||
|
{opacity: 1, transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)', offset: 0.4},
|
||||||
|
{opacity: 0, transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0)', offset: 1},
|
||||||
|
],
|
||||||
|
config: {
|
||||||
|
duration,
|
||||||
|
easing,
|
||||||
|
iterations,
|
||||||
|
},
|
||||||
|
transformOrigin: 'center bottom',
|
||||||
|
timingFunction: [
|
||||||
|
'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
|
||||||
|
'cubic-bezier(0.175, 0.885, 0.32, 1)',
|
||||||
|
],
|
||||||
|
};
|
||||||
|
};
|
||||||
|
module.exports = {
|
||||||
|
zoomOut,
|
||||||
|
zoomOutDown,
|
||||||
|
zoomOutLeft,
|
||||||
|
zoomOutRight,
|
||||||
|
zoomOutUp,
|
||||||
|
};
|
||||||
18
package.json
18
package.json
|
|
@ -27,7 +27,9 @@
|
||||||
"docs": "npm-run-all docs:library docs:pages",
|
"docs": "npm-run-all docs:library docs:pages",
|
||||||
"version": "npm-run-all start docs && git add -A docs animate.css animate.min.css animate.compat.css",
|
"version": "npm-run-all start docs && git add -A docs animate.css animate.min.css animate.compat.css",
|
||||||
"postversion": "git push && git push --tags",
|
"postversion": "git push && git push --tags",
|
||||||
"prepare": "husky install"
|
"prepare": "husky install",
|
||||||
|
"dev-js": "rollup -c rollup.config.js -w",
|
||||||
|
"build-js": "rollup -c rollup.config.js"
|
||||||
},
|
},
|
||||||
"browserslist": [
|
"browserslist": [
|
||||||
"> 3%",
|
"> 3%",
|
||||||
|
|
@ -42,6 +44,8 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||||
|
"@rollup/plugin-terser": "^0.4.4",
|
||||||
"autoprefixer": "^10.4.7",
|
"autoprefixer": "^10.4.7",
|
||||||
"cssnano": "^5.0.17",
|
"cssnano": "^5.0.17",
|
||||||
"eslint": "^7.32.0",
|
"eslint": "^7.32.0",
|
||||||
|
|
@ -53,7 +57,7 @@
|
||||||
"postcss-cli": "^8.3.1",
|
"postcss-cli": "^8.3.1",
|
||||||
"postcss-header": "^3.0.1",
|
"postcss-header": "^3.0.1",
|
||||||
"postcss-import": "^14.0.2",
|
"postcss-import": "^14.0.2",
|
||||||
"postcss-prefixer": "^2.1.3",
|
"postcss-prefixer": "^3.0.0",
|
||||||
"postcss-preset-env": "^6.7.0",
|
"postcss-preset-env": "^6.7.0",
|
||||||
"prettier": "^2.7.1"
|
"prettier": "^2.7.1"
|
||||||
},
|
},
|
||||||
|
|
@ -64,6 +68,12 @@
|
||||||
"animate.compat.css",
|
"animate.compat.css",
|
||||||
"animate.min.css",
|
"animate.min.css",
|
||||||
"animate.css",
|
"animate.css",
|
||||||
"source/**/*.css"
|
"source/**/*.css",
|
||||||
]
|
"js/**/*.js"
|
||||||
|
],
|
||||||
|
"exports": {
|
||||||
|
"./js": {
|
||||||
|
"import": "./js/index.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
29
rollup.config.js
Normal file
29
rollup.config.js
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
const commonjs = require('@rollup/plugin-commonjs');
|
||||||
|
const resolve = require('@rollup/plugin-node-resolve');
|
||||||
|
const terser = require('@rollup/plugin-terser');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
input: 'js/index.js',
|
||||||
|
output: [
|
||||||
|
{
|
||||||
|
file: 'animate-css.cjs',
|
||||||
|
format: 'cjs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
file: 'animate-css.mjs',
|
||||||
|
format: 'es',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
file: 'animate-css.js',
|
||||||
|
format: 'umd',
|
||||||
|
name: 'AnimateCss',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
file: 'animate-css.min.js',
|
||||||
|
format: 'umd',
|
||||||
|
name: 'AnimateCss',
|
||||||
|
plugins: [terser()],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
plugins: [resolve(), commonjs()],
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue