mirror of
https://github.com/animate-css/animate.css.git
synced 2024-11-17 17:45:17 +01:00
1004 lines
41 KiB
JavaScript
1004 lines
41 KiB
JavaScript
|
!(function (t, e) {
|
||
|
|
'object' == typeof exports && 'undefined' != typeof module
|
||
|
|
? (module.exports = e())
|
||
|
|
: 'function' == typeof define && define.amd
|
||
|
|
? define(e)
|
||
|
|
: ((t = 'undefined' != typeof globalThis ? globalThis : t || self).AnimateCss = e());
|
||
|
|
})(this, function () {
|
||
|
|
'use strict';
|
||
|
|
function t(t) {
|
||
|
|
return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, 'default') ? t.default : t;
|
||
|
|
}
|
||
|
|
return t({
|
||
|
|
...{
|
||
|
|
bounce: (t, e = 1, a = 'cubic-bezier(0.215, 0.61, 0.355, 1)') => ({
|
||
|
|
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: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
flash: (t = 1e3, e = 1 / 0, a = 'linear') => ({
|
||
|
|
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: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
headShake: (t = 1e3, e = 1, a = 'ease-in-out') => ({
|
||
|
|
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: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
heartBeat: (t = 1e3, e = 1 / 0, a = 'ease-in-out') => ({
|
||
|
|
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: 1.3 * t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
jello: (t = 1e3, e = 1 / 0, a = 'ease-in-out') => ({
|
||
|
|
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: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
pulse: (t = 1e3, e = 1 / 0, a = 'ease-in-out') => ({
|
||
|
|
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: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
rubberBand: (t = 1e3, e = 1, a = 'ease-in-out') => ({
|
||
|
|
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: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
shake: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
shakeX: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
shakeY: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
swing: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'rotate3d(0, 0, 1, 0deg)', offset: 0},
|
||
|
|
{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},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
tada: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
wobble: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{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},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
backInDown: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
backInLeft: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
backInRight: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
backInUp: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
backOutDown: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
backOutLeft: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
backOutRight: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
backOutUp: (t = 1e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
bounceIn: (t = 1e3, e = 'cubic-bezier(0.215, 0.61, 0.355, 1)', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
bounceInDown: (t = 1e3, e = 'cubic-bezier(0.215, 0.61, 0.355, 1)', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
bounceInLeft: (t = 1e3, e = 'cubic-bezier(0.215, 0.61, 0.355, 1)', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
bounceInRight: (t = 1e3, e = 'cubic-bezier(0.215, 0.61, 0.355, 1)', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
bounceInUp: (t = 1e3, e = 'cubic-bezier(0.215, 0.61, 0.355, 1)', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
bounceOutDown: (t = 1e3, e = 'cubic-bezier(0.215, 0.61, 0.355, 1)', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
bounceOutLeft: (t = 1e3, e = 'cubic-bezier(0.215, 0.61, 0.355, 1)', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
bounceOutRight: (t = 1e3, e = 'cubic-bezier(0.215, 0.61, 0.355, 1)', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
bounceOutUp: (t = 1e3, e = 'cubic-bezier(0.215, 0.61, 0.355, 1)', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
fadeIn: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 0, offset: 0},
|
||
|
|
{opacity: 1, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeInBottomLeft: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 0, transform: 'translate3d(-100%, 100%, 0)', offset: 0},
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeInBottomRight: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 0, transform: 'translate3d(100%, 100%, 0)', offset: 0},
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeInDown: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 0, transform: 'translate3d(0, -100%, 0)', offset: 0},
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeInDownBig: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 0, transform: 'translate3d(0, -2000px, 0)', offset: 0},
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeInLeft: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 0, transform: 'translate3d(-100%, 0, 0)', offset: 0},
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeInLeftBig: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 0, transform: 'translate3d(-2000px, 0, 0)', offset: 0},
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeInRight: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 0, transform: 'translate3d(100%, 0, 0)', offset: 0},
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeInRightBig: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 0, transform: 'translate3d(2000px, 0, 0)', offset: 0},
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeInTopLeft: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 0, transform: 'translate3d(-100%, -100%, 0)', offset: 0},
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeInTopRight: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 0, transform: 'translate3d(100%, -100%, 0)', offset: 0},
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeInUp: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 0, transform: 'translate3d(0, 100%, 0)', offset: 0},
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeInUpBig: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 0, transform: 'translate3d(0, 2000px, 0)', offset: 0},
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
fadeOut: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, offset: 0},
|
||
|
|
{opacity: 0, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeOutBottomLeft: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{opacity: 0, transform: 'translate3d(-100%, 100%, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeOutBottomRight: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{opacity: 0, transform: 'translate3d(100%, 100%, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeOutDown: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{opacity: 0, transform: 'translate3d(0, 100%, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeOutDownBig: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{opacity: 0, transform: 'translate3d(0, 2000px, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeOutLeft: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{opacity: 0, transform: 'translate3d(-100%, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeOutLeftBig: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{opacity: 0, transform: 'translate3d(-2000px, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeOutRight: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{opacity: 0, transform: 'translate3d(100%, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeOutRightBig: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{opacity: 0, transform: 'translate3d(2000px, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeOutTopLeft: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{opacity: 0, transform: 'translate3d(-100%, -100%, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeOutTopRight: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{opacity: 0, transform: 'translate3d(100%, -100%, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeOutUp: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{opacity: 0, transform: 'translate3d(0, -100%, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
fadeOutUpBig: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{opacity: 0, transform: 'translate3d(0, -2000px, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
flip: (t = 1e3, e = 'ease-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
flipInX: (t = 1e3, e = 'ease-in', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
flipInY: (t = 1e3, e = 'ease-in', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
flipOutX: (t = 1e3, e = 'ease-in', a = 1) => ({
|
||
|
|
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: 0.75 * t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
flipOutY: (t = 1e3, e = 'ease-in', a = 1) => ({
|
||
|
|
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: 0.75 * t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
lightSpeedInLeft: (t = 1e3, e = 'ease-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
lightSpeedInRight: (t = 1e3, e = 'ease-out', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
lightSpeedOutLeft: (t = 1e3, e = 'ease-in', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, offset: 0},
|
||
|
|
{transform: 'translate3d(-100%, 0, 0) skewX(-30deg)', opacity: 0, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
lightSpeedOutRight: (t = 1e3, e = 'ease-in', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, offset: 0},
|
||
|
|
{transform: 'translate3d(100%, 0, 0) skewX(30deg)', opacity: 0, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
rotateIn: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'rotate3d(0, 0, 1, -200deg)', opacity: 0, offset: 0},
|
||
|
|
{transform: 'translate3d(0, 0, 0)', opacity: 1, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
rotateInDownLeft: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'rotate3d(0, 0, 1, -45deg)', opacity: 0, offset: 0},
|
||
|
|
{transform: 'translate3d(0, 0, 0)', opacity: 1, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
rotateInDownRight: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'rotate3d(0, 0, 1, 45deg)', opacity: 0, offset: 0},
|
||
|
|
{transform: 'translate3d(0, 0, 0)', opacity: 1, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
rotateInUpLeft: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'rotate3d(0, 0, 1, 45deg)', opacity: 0, offset: 0},
|
||
|
|
{transform: 'translate3d(0, 0, 0)', opacity: 1, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
rotateInUpRight: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'rotate3d(0, 0, 1, -90deg)', opacity: 0, offset: 0},
|
||
|
|
{transform: 'translate3d(0, 0, 0)', opacity: 1, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
rotateOut: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, offset: 0},
|
||
|
|
{transform: 'rotate3d(0, 0, 1, 200deg)', opacity: 0, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
rotateOutDownLeft: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, offset: 0},
|
||
|
|
{transform: 'rotate3d(0, 0, 1, 45deg)', opacity: 0, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
rotateOutDownRight: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, offset: 0},
|
||
|
|
{transform: 'rotate3d(0, 0, 1, -45deg)', opacity: 0, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
rotateOutUpLeft: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, offset: 0},
|
||
|
|
{transform: 'rotate3d(0, 0, 1, -45deg)', opacity: 0, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
rotateOutUpRight: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{opacity: 1, offset: 0},
|
||
|
|
{transform: 'rotate3d(0, 0, 1, 90deg)', opacity: 0, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
slideInDown: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'translate3d(0, -100%, 0)', visibility: 'visible', offset: 0},
|
||
|
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
slideInLeft: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'translate3d(-100%, 0, 0)', visibility: 'visible', offset: 0},
|
||
|
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
slideInRight: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'translate3d(100%, 0, 0)', visibility: 'visible', offset: 0},
|
||
|
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
slideInUp: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'translate3d(0, 100%, 0)', visibility: 'visible', offset: 0},
|
||
|
|
{transform: 'translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
slideOutDown: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{visibility: 'hidden', transform: 'translate3d(0, 100%, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
slideOutLeft: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{visibility: 'hidden', transform: 'translate3d(-100%, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
slideOutRight: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{visibility: 'hidden', transform: 'translate3d(100%, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
slideOutUp: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
keyframes: [
|
||
|
|
{transform: 'translate3d(0, 0, 0)', offset: 0},
|
||
|
|
{visibility: 'hidden', transform: 'translate3d(0, -100%, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
hinge: (t = 2e3, e = 'ease-in-out', a = 1) => ({
|
||
|
|
keyframes: [
|
||
|
|
{offset: 0, animationTimingFunction: e},
|
||
|
|
{transform: 'rotate3d(0, 0, 1, 80deg)', offset: 0.2, animationTimingFunction: e},
|
||
|
|
{
|
||
|
|
transform: 'rotate3d(0, 0, 1, 60deg)',
|
||
|
|
offset: 0.4,
|
||
|
|
opacity: 1,
|
||
|
|
animationTimingFunction: e,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
transform: 'rotate3d(0, 0, 1, 60deg)',
|
||
|
|
offset: 0.6,
|
||
|
|
opacity: 1,
|
||
|
|
animationTimingFunction: e,
|
||
|
|
},
|
||
|
|
{transform: 'rotate3d(0, 0, 1, 80deg)', offset: 0.8, animationTimingFunction: e},
|
||
|
|
{transform: 'translate3d(0, 700px, 0)', opacity: 0, offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, easing: e, iterations: a},
|
||
|
|
}),
|
||
|
|
jackInTheBox: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
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: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
rollIn: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
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: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
rollOut: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
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: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
zoomIn: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
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: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
zoomInDown: (
|
||
|
|
t = 1e3,
|
||
|
|
e = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
|
||
|
|
a = 'cubic-bezier(0.175, 0.885, 0.32, 1)',
|
||
|
|
s = 1,
|
||
|
|
) => ({
|
||
|
|
keyframes: [
|
||
|
|
{
|
||
|
|
opacity: 0,
|
||
|
|
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0)',
|
||
|
|
offset: 0,
|
||
|
|
easing: e,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
opacity: 1,
|
||
|
|
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0)',
|
||
|
|
offset: 0.6,
|
||
|
|
easing: a,
|
||
|
|
},
|
||
|
|
{opacity: 1, transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, iterations: s},
|
||
|
|
}),
|
||
|
|
zoomInLeft: (
|
||
|
|
t = 1e3,
|
||
|
|
e = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
|
||
|
|
a = 'cubic-bezier(0.175, 0.885, 0.32, 1)',
|
||
|
|
s = 1,
|
||
|
|
) => ({
|
||
|
|
keyframes: [
|
||
|
|
{
|
||
|
|
opacity: 0,
|
||
|
|
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0)',
|
||
|
|
offset: 0,
|
||
|
|
easing: e,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
opacity: 1,
|
||
|
|
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0)',
|
||
|
|
offset: 0.6,
|
||
|
|
easing: a,
|
||
|
|
},
|
||
|
|
{opacity: 1, transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, iterations: s},
|
||
|
|
}),
|
||
|
|
zoomInRight: (
|
||
|
|
t = 1e3,
|
||
|
|
e = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
|
||
|
|
a = 'cubic-bezier(0.175, 0.885, 0.32, 1)',
|
||
|
|
s = 1,
|
||
|
|
) => ({
|
||
|
|
keyframes: [
|
||
|
|
{
|
||
|
|
opacity: 0,
|
||
|
|
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0)',
|
||
|
|
offset: 0,
|
||
|
|
easing: e,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
opacity: 1,
|
||
|
|
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0)',
|
||
|
|
offset: 0.6,
|
||
|
|
easing: a,
|
||
|
|
},
|
||
|
|
{opacity: 1, transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, iterations: s},
|
||
|
|
}),
|
||
|
|
zoomInUp: (
|
||
|
|
t = 1e3,
|
||
|
|
e = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
|
||
|
|
a = 'cubic-bezier(0.175, 0.885, 0.32, 1)',
|
||
|
|
s = 1,
|
||
|
|
) => ({
|
||
|
|
keyframes: [
|
||
|
|
{
|
||
|
|
opacity: 0,
|
||
|
|
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0)',
|
||
|
|
offset: 0,
|
||
|
|
easing: e,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
opacity: 1,
|
||
|
|
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
|
||
|
|
offset: 0.6,
|
||
|
|
easing: a,
|
||
|
|
},
|
||
|
|
{opacity: 1, transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 1},
|
||
|
|
],
|
||
|
|
config: {duration: t, iterations: s},
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
...{
|
||
|
|
zoomOut: (t = 1e3, e = 1, a = 'ease') => ({
|
||
|
|
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: t, easing: a, iterations: e},
|
||
|
|
}),
|
||
|
|
zoomOutDown: (
|
||
|
|
t = 1e3,
|
||
|
|
e = 1,
|
||
|
|
a = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
|
||
|
|
s = 'cubic-bezier(0.175, 0.885, 0.32, 1)',
|
||
|
|
) => ({
|
||
|
|
keyframes: [
|
||
|
|
{
|
||
|
|
opacity: 1,
|
||
|
|
transform: 'scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0)',
|
||
|
|
offset: 0.4,
|
||
|
|
easing: a,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
opacity: 0,
|
||
|
|
transform: 'scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0)',
|
||
|
|
offset: 1,
|
||
|
|
easing: s,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
config: {duration: t, iterations: e},
|
||
|
|
}),
|
||
|
|
zoomOutLeft: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
transformOrigin: 'left center',
|
||
|
|
}),
|
||
|
|
zoomOutRight: (t = 1e3, e = 'linear', a = 1) => ({
|
||
|
|
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: t, easing: e, iterations: a},
|
||
|
|
transformOrigin: 'right center',
|
||
|
|
}),
|
||
|
|
zoomOutUp: (t = 1e3, e = 1, a = 'linear') => ({
|
||
|
|
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: t, easing: a, iterations: e},
|
||
|
|
transformOrigin: 'center bottom',
|
||
|
|
timingFunction: [
|
||
|
|
'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
|
||
|
|
'cubic-bezier(0.175, 0.885, 0.32, 1)',
|
||
|
|
],
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
});
|
||
|
|
});
|