mirror of
https://github.com/animate-css/animate.css.git
synced 2024-11-17 17:45:17 +01:00
95 lines
2.3 KiB
JavaScript
95 lines
2.3 KiB
JavaScript
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,
|
|
};
|