Robot/animate.css
1
0
Fork 0
mirror of https://github.com/animate-css/animate.css.git synced 2024-11-17 17:45:17 +01:00
Code Issues Projects Releases Packages Wiki Activity

add DOM Style version

Browse source
This commit is contained in:
zakarialaoui10 2024-09-15 19:12:41 +01:00
parent 3f8ab233db
commit b2c5be9e9c
25 changed files with 8717 additions and 638 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1637
animate-css.cjs Normal file
View file

File diff suppressed because it is too large Load diff

1774
animate-css.js Normal file
View file

File diff suppressed because it is too large Load diff

1003
animate-css.min.js vendored Normal file
View file

File diff suppressed because it is too large Load diff

1749
animate-css.mjs Normal file
View file

File diff suppressed because it is too large Load diff

2
animate.css vendored
View file

@ -5,7 +5,7 @@
* Version - 4.1.1
* Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
*
* Copyright (c) 2022 Animate.css
* Copyright (c) 2024 Animate.css
*/
:root {
--animate-duration: 1s;

18
js/index.js Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View file

@ -27,7 +27,9 @@
"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",
"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": [
"> 3%",
@ -42,6 +44,8 @@
}
},
"devDependencies": {
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-terser": "^0.4.4",
"autoprefixer": "^10.4.7",
"cssnano": "^5.0.17",
"eslint": "^7.32.0",
@ -53,7 +57,7 @@
"postcss-cli": "^8.3.1",
"postcss-header": "^3.0.1",
"postcss-import": "^14.0.2",
"postcss-prefixer": "^2.1.3",
"postcss-prefixer": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"prettier": "^2.7.1"
},
@ -64,6 +68,12 @@
"animate.compat.css",
"animate.min.css",
"animate.css",
"source/**/*.css"
]
"source/**/*.css",
"js/**/*.js"
],
"exports": {
"./js": {
"import": "./js/index.js"
}
}
}

29
rollup.config.js Normal file
View 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()],
};

1400
yarn.lock
View file

File diff suppressed because it is too large Load diff