diff --git a/source/swoop_entrances/swoopInDown.css b/source/swoop_entrances/swoopInDown.css new file mode 100644 index 000000000..367f1a6e1 --- /dev/null +++ b/source/swoop_entrances/swoopInDown.css @@ -0,0 +1,103 @@ +@keyframes swoopInDown { + from { + opacity: 0; + transform: translate3d(0, 100%, 0) scale3d(1, 1.5, 1); + } + + 4% { + transform: translate3d(0, 80.75%, 0) scale3d(1, 1.44, 1); + } + + 9% { + transform: translate3d(0, 63.78%, 0) scale3d(1, 1.38, 1); + } + + 13% { + transform: translate3d(0, 48.97%, 0) scale3d(1, 1.33, 1); + } + + 17% { + transform: translate3d(0, 36.18%, 0) scale3d(1, 1.28, 1); + } + + 22% { + transform: translate3d(0, 25.28%, 0) scale3d(1, 1.24, 1); + } + + 26% { + transform: translate3d(0, 16.13%, 0) scale3d(1, 1.2, 1); + } + + 30% { + transform: translate3d(0, 8.6%, 0) scale3d(1, 1.17, 1); + } + + 35% { + transform: translate3d(0, 2.57%, 0) scale3d(1, 1.14, 1); + } + + 39% { + transform: translate3d(0, -2.12%, 0) scale3d(1, 1.11, 1); + } + + 43% { + transform: translate3d(0, -5.58%, 0) scale3d(1, 1.09, 1); + } + + 48% { + transform: translate3d(0, -7.95%, 0) scale3d(1, 1.07, 1); + } + + 52% { + transform: translate3d(0, -9.37%, 0) scale3d(1, 1.05, 1); + } + + 57% { + opacity: 1; + transform: translate3d(0, -9.96%, 0) scale3d(1, 1.04, 1); + } + + 61% { + transform: translate3d(0, -9.87%, 0) scale3d(1, 1.03, 1); + } + + 65% { + transform: translate3d(0, -9.22%, 0) scale3d(1, 1.02, 1); + } + + 70% { + transform: translate3d(0, -8.15%, 0) scale3d(1, 1.01, 1); + } + + 74% { + transform: translate3d(0, -6.78%, 0) scale3d(1, 1.01, 1); + } + + 78% { + transform: translate3d(0, -5.27%, 0) scale3d(1, 1.01, 1); + } + + 83% { + transform: translate3d(0, -3.73%, 0) scale3d(1, 1, 1); + } + + 87% { + transform: translate3d(0, -2.3%, 0) scale3d(1, 1, 1); + } + + 91% { + transform: translate3d(0, -1.11%, 0) scale3d(1, 1, 1); + } + + 96% { + transform: translate3d(0, -0.3%, 0) scale3d(1, 1, 1); + } + + to { + transform: translate3d(0, 0, 0) scale3d(1, 1, 1); + } +} + +.swoopInDown { + animation-name: swoopInDown; +} diff --git a/source/swoop_entrances/swoopInLeft.css b/source/swoop_entrances/swoopInLeft.css new file mode 100644 index 000000000..f8f95b7a5 --- /dev/null +++ b/source/swoop_entrances/swoopInLeft.css @@ -0,0 +1,103 @@ +@keyframes swoopInLeft { + from { + opacity: 0; + transform: translate3d(-100%, 0, 0) scale3d(1.5, 1, 1); + } + + 4% { + transform: translate3d(-80.75%, 0, 0) scale3d(1.44, 1, 1); + } + + 9% { + transform: translate3d(-63.78%, 0, 0) scale3d(1.38, 1, 1); + } + + 13% { + transform: translate3d(-48.97%, 0, 0) scale3d(1.33, 1, 1); + } + + 17% { + transform: translate3d(-36.18%, 0, 0) scale3d(1.28, 1, 1); + } + + 22% { + transform: translate3d(-25.28%, 0, 0) scale3d(1.24, 1, 1); + } + + 26% { + transform: translate3d(-16.13%, 0, 0) scale3d(1.2, 1, 1); + } + + 30% { + transform: translate3d(-8.6%, 0, 0) scale3d(1.17, 1, 1); + } + + 35% { + transform: translate3d(-2.57%, 0, 0) scale3d(1.14, 1, 1); + } + + 39% { + transform: translate3d(2.12%, 0, 0) scale3d(1.11, 1, 1); + } + + 43% { + transform: translate3d(5.58%, 0, 0) scale3d(1.09, 1, 1); + } + + 48% { + transform: translate3d(7.95%, 0, 0) scale3d(1.07, 1, 1); + } + + 52% { + transform: translate3d(9.37%, 0, 0) scale3d(1.05, 1, 1); + } + + 57% { + opacity: 1; + transform: translate3d(9.96%, 0, 0) scale3d(1.04, 1, 1); + } + + 61% { + transform: translate3d(9.87%, 0, 0) scale3d(1.03, 1, 1); + } + + 65% { + transform: translate3d(9.22%, 0, 0) scale3d(1.02, 1, 1); + } + + 70% { + transform: translate3d(8.15%, 0, 0) scale3d(1.01, 1, 1); + } + + 74% { + transform: translate3d(6.78%, 0, 0) scale3d(1.01, 1, 1); + } + + 78% { + transform: translate3d(5.27%, 0, 0) scale3d(1.01, 1, 1); + } + + 83% { + transform: translate3d(3.73%, 0, 0) scale3d(1, 1, 1); + } + + 87% { + transform: translate3d(2.3%, 0, 0) scale3d(1, 1, 1); + } + + 91% { + transform: translate3d(1.11%, 0, 0) scale3d(1, 1, 1); + } + + 96% { + transform: translate3d(0.3%, 0, 0) scale3d(1, 1, 1); + } + + to { + transform: translate3d(0, 0, 0) scale3d(1, 1, 1); + } +} + +.swoopInLeft { + animation-name: swoopInLeft; +} diff --git a/source/swoop_entrances/swoopInRight.css b/source/swoop_entrances/swoopInRight.css new file mode 100644 index 000000000..66d3790b1 --- /dev/null +++ b/source/swoop_entrances/swoopInRight.css @@ -0,0 +1,103 @@ +@keyframes swoopInRight { + from { + opacity: 0; + transform: translate3d(100%, 0, 0) scale3d(1.5, 1, 1); + } + + 4% { + transform: translate3d(80.75%, 0, 0) scale3d(1.44, 1, 1); + } + + 9% { + transform: translate3d(63.78%, 0, 0) scale3d(1.38, 1, 1); + } + + 13% { + transform: translate3d(48.97%, 0, 0) scale3d(1.33, 1, 1); + } + + 17% { + transform: translate3d(36.18%, 0, 0) scale3d(1.28, 1, 1); + } + + 22% { + transform: translate3d(25.28%, 0, 0) scale3d(1.24, 1, 1); + } + + 26% { + transform: translate3d(16.13%, 0, 0) scale3d(1.2, 1, 1); + } + + 30% { + transform: translate3d(8.6%, 0, 0) scale3d(1.17, 1, 1); + } + + 35% { + transform: translate3d(2.57%, 0, 0) scale3d(1.14, 1, 1); + } + + 39% { + transform: translate3d(-2.12%, 0, 0) scale3d(1.11, 1, 1); + } + + 43% { + transform: translate3d(-5.58%, 0, 0) scale3d(1.09, 1, 1); + } + + 48% { + transform: translate3d(-7.95%, 0, 0) scale3d(1.07, 1, 1); + } + + 52% { + transform: translate3d(-9.37%, 0, 0) scale3d(1.05, 1, 1); + } + + 57% { + opacity: 1; + transform: translate3d(-9.96%, 0, 0) scale3d(1.04, 1, 1); + } + + 61% { + transform: translate3d(-9.87%, 0, 0) scale3d(1.03, 1, 1); + } + + 65% { + transform: translate3d(-9.22%, 0, 0) scale3d(1.02, 1, 1); + } + + 70% { + transform: translate3d(-8.15%, 0, 0) scale3d(1.01, 1, 1); + } + + 74% { + transform: translate3d(-6.78%, 0, 0) scale3d(1.01, 1, 1); + } + + 78% { + transform: translate3d(-5.27%, 0, 0) scale3d(1.01, 1, 1); + } + + 83% { + transform: translate3d(-3.73%, 0, 0) scale3d(1, 1, 1); + } + + 87% { + transform: translate3d(-2.3%, 0, 0) scale3d(1, 1, 1); + } + + 91% { + transform: translate3d(-1.11%, 0, 0) scale3d(1, 1, 1); + } + + 96% { + transform: translate3d(-0.3%, 0, 0) scale3d(1, 1, 1); + } + + to { + transform: translate3d(0%, 0, 0) scale3d(1, 1, 1); + } +} + +.swoopInRight { + animation-name: swoopInRight; +} diff --git a/source/swoop_entrances/swoopInUp.css b/source/swoop_entrances/swoopInUp.css new file mode 100644 index 000000000..b0f25f25b --- /dev/null +++ b/source/swoop_entrances/swoopInUp.css @@ -0,0 +1,103 @@ +@keyframes swoopInUp { + from { + opacity: 0; + transform: translate3d(0, -100%, 0) scale3d(1, 1.5, 1); + } + + 4% { + transform: translate3d(0, -80.75%, 0) scale3d(1, 1.44, 1); + } + + 9% { + transform: translate3d(0, -63.78%, 0) scale3d(1, 1.38, 1); + } + + 13% { + transform: translate3d(0, -48.97%, 0) scale3d(1, 1.33, 1); + } + + 17% { + transform: translate3d(0, -36.18%, 0) scale3d(1, 1.28, 1); + } + + 22% { + transform: translate3d(0, -25.28%, 0) scale3d(1, 1.24, 1); + } + + 26% { + transform: translate3d(0, -16.13%, 0) scale3d(1, 1.2, 1); + } + + 30% { + transform: translate3d(0, -8.6%, 0) scale3d(1, 1.17, 1); + } + + 35% { + transform: translate3d(0, -2.57%, 0) scale3d(1, 1.14, 1); + } + + 39% { + transform: translate3d(0, 2.12%, 0) scale3d(1, 1.11, 1); + } + + 43% { + transform: translate3d(0, 5.58%, 0) scale3d(1, 1.09, 1); + } + + 48% { + transform: translate3d(0, 7.95%, 0) scale3d(1, 1.07, 1); + } + + 52% { + transform: translate3d(0, 9.37%, 0) scale3d(1, 1.05, 1); + } + + 57% { + opacity: 1; + transform: translate3d(0, 9.96%, 0) scale3d(1, 1.04, 1); + } + + 61% { + transform: translate3d(0, 9.87%, 0) scale3d(1, 1.03, 1); + } + + 65% { + transform: translate3d(0, 9.22%, 0) scale3d(1, 1.02, 1); + } + + 70% { + transform: translate3d(0, 8.15%, 0) scale3d(1, 1.01, 1); + } + + 74% { + transform: translate3d(0, 6.78%, 0) scale3d(1, 1.01, 1); + } + + 78% { + transform: translate3d(0, 5.27%, 0) scale3d(1, 1.01, 1); + } + + 83% { + transform: translate3d(0, 3.73%, 0) scale3d(1, 1, 1); + } + + 87% { + transform: translate3d(0, 2.3%, 0) scale3d(1, 1, 1); + } + + 91% { + transform: translate3d(0, 1.11%, 0) scale3d(1, 1, 1); + } + + 96% { + transform: translate3d(0, 0.3%, 0) scale3d(1, 1, 1); + } + + to { + transform: translate3d(0, 0, 0) scale3d(1, 1, 1); + } +} + +.swoopInUp { + animation-name: swoopInUp; +} diff --git a/source/swoop_exits/swoopOutDown.css b/source/swoop_exits/swoopOutDown.css new file mode 100644 index 000000000..f96857267 --- /dev/null +++ b/source/swoop_exits/swoopOutDown.css @@ -0,0 +1,103 @@ +@keyframes swoopOutDown { + from { + transform: translate3d(0, 0, 0) scale3d(1, 1, 1); + } + + 4% { + transform: translate3d(0, -0.3%, 0) scale3d(1, 1, 1); + } + + 9% { + transform: translate3d(0, -1.11%, 0) scale3d(1, 1, 1); + } + + 13% { + transform: translate3d(0, -2.3%, 0) scale3d(1, 1, 1); + } + + 17% { + transform: translate3d(0, -3.73%, 0) scale3d(1, 1, 1); + } + + 22% { + transform: translate3d(0, -5.27%, 0) scale3d(1, 1.01, 1); + } + + 26% { + transform: translate3d(0, -6.78%, 0) scale3d(1, 1.01, 1); + } + + 30% { + transform: translate3d(0, -8.15%, 0) scale3d(1, 1.01, 1); + } + + 35% { + transform: translate3d(0, -9.22%, 0) scale3d(1, 1.02, 1); + } + + 39% { + transform: translate3d(0, -9.87%, 0) scale3d(1, 1.03, 1); + } + + 43% { + transform: translate3d(0, -9.96%, 0) scale3d(1, 1.04, 1); + } + + 48% { + transform: translate3d(0, -9.37%, 0) scale3d(1, 1.05, 1); + } + + 52% { + transform: translate3d(0, -7.95%, 0) scale3d(1, 1.07, 1); + } + + 57% { + opacity: 1; + transform: translate3d(0, -5.58%, 0) scale3d(1, 1.09, 1); + } + + 61% { + transform: translate3d(0, -2.12%, 0) scale3d(1, 1.11, 1); + } + + 65% { + transform: translate3d(0, 2.57%, 0) scale3d(1, 1.14, 1); + } + + 70% { + transform: translate3d(0, 8.6%, 0) scale3d(1, 1.17, 1); + } + + 74% { + transform: translate3d(0, 16.13%, 0) scale3d(1, 1.2, 1); + } + + 78% { + transform: translate3d(0, 25.28%, 0) scale3d(1, 1.24, 1); + } + + 83% { + transform: translate3d(0, 36.18%, 0) scale3d(1, 1.28, 1); + } + + 87% { + transform: translate3d(0, 48.97%, 0) scale3d(1, 1.33, 1); + } + + 91% { + transform: translate3d(0, 63.78%, 0) scale3d(1, 1.38, 1); + } + + 96% { + transform: translate3d(0, 80.75%, 0) scale3d(1, 1.44, 1); + } + + to { + opacity: 0; + transform: translate3d(0, 100%, 0) scale3d(1, 1.5, 1); + } +} + +.swoopOutDown { + animation-name: swoopOutDown; +} diff --git a/source/swoop_exits/swoopOutLeft.css b/source/swoop_exits/swoopOutLeft.css new file mode 100644 index 000000000..f55572ff6 --- /dev/null +++ b/source/swoop_exits/swoopOutLeft.css @@ -0,0 +1,103 @@ +@keyframes swoopOutLeft { + from { + transform: translate3d(0, 0, 0) scale3d(1, 1, 1); + } + + 4% { + transform: translate3d(0.3%, 0, 0) scale3d(1, 1, 1); + } + + 9% { + transform: translate3d(1.11%, 0, 0) scale3d(1, 1, 1); + } + + 13% { + transform: translate3d(2.3%, 0, 0) scale3d(1, 1, 1); + } + + 17% { + transform: translate3d(3.73%, 0, 0) scale3d(1, 1, 1); + } + + 22% { + transform: translate3d(5.27%, 0, 0) scale3d(1.01, 1, 1); + } + + 26% { + transform: translate3d(6.78%, 0, 0) scale3d(1.01, 1, 1); + } + + 30% { + transform: translate3d(8.15%, 0, 0) scale3d(1.01, 1, 1); + } + + 35% { + transform: translate3d(9.22%, 0, 0) scale3d(1.02, 1, 1); + } + + 39% { + transform: translate3d(9.87%, 0, 0) scale3d(1.03, 1, 1); + } + + 43% { + transform: translate3d(9.96%, 0, 0) scale3d(1.04, 1, 1); + } + + 48% { + transform: translate3d(9.37%, 0, 0) scale3d(1.05, 1, 1); + } + + 52% { + transform: translate3d(7.95%, 0, 0) scale3d(1.07, 1, 1); + } + + 57% { + opacity: 1; + transform: translate3d(5.58%, 0, 0) scale3d(1.09, 1, 1); + } + + 61% { + transform: translate3d(2.12%, 0, 0) scale3d(1.11, 1, 1); + } + + 65% { + transform: translate3d(-2.57%, 0, 0) scale3d(1.14, 1, 1); + } + + 70% { + transform: translate3d(-8.6%, 0, 0) scale3d(1.17, 1, 1); + } + + 74% { + transform: translate3d(-16.13%, 0, 0) scale3d(1.2, 1, 1); + } + + 78% { + transform: translate3d(-25.28%, 0, 0) scale3d(1.24, 1, 1); + } + + 83% { + transform: translate3d(-36.18%, 0, 0) scale3d(1.28, 1, 1); + } + + 87% { + transform: translate3d(-48.97%, 0, 0) scale3d(1.33, 1, 1); + } + + 91% { + transform: translate3d(-63.78%, 0, 0) scale3d(1.38, 1, 1); + } + + 96% { + transform: translate3d(-80.75%, 0, 0) scale3d(1.44, 1, 1); + } + + to { + opacity: 0; + transform: translate3d(-100%, 0, 0) scale3d(1.5, 1, 1); + } +} + +.swoopOutLeft { + animation-name: swoopOutLeft; +} diff --git a/source/swoop_exits/swoopOutRight.css b/source/swoop_exits/swoopOutRight.css new file mode 100644 index 000000000..f1f81ea84 --- /dev/null +++ b/source/swoop_exits/swoopOutRight.css @@ -0,0 +1,103 @@ +@keyframes swoopOutRight { + from { + transform: translate3d(0, 0, 0) scale3d(1, 1, 1); + } + + 4% { + transform: translate3d(-0.3%, 0, 0) scale3d(1, 1, 1); + } + + 9% { + transform: translate3d(-1.11%, 0, 0) scale3d(1, 1, 1); + } + + 13% { + transform: translate3d(-2.3%, 0, 0) scale3d(1, 1, 1); + } + + 17% { + transform: translate3d(-3.73%, 0, 0) scale3d(1, 1, 1); + } + + 22% { + transform: translate3d(-5.27%, 0, 0) scale3d(1.01, 1, 1); + } + + 26% { + transform: translate3d(-6.78%, 0, 0) scale3d(1.01, 1, 1); + } + + 30% { + transform: translate3d(-8.15%, 0, 0) scale3d(1.01, 1, 1); + } + + 35% { + transform: translate3d(-9.22%, 0, 0) scale3d(1.02, 1, 1); + } + + 39% { + transform: translate3d(-9.87%, 0, 0) scale3d(1.03, 1, 1); + } + + 43% { + transform: translate3d(-9.96%, 0, 0) scale3d(1.04, 1, 1); + } + + 48% { + transform: translate3d(-9.37%, 0, 0) scale3d(1.05, 1, 1); + } + + 52% { + transform: translate3d(-7.95%, 0, 0) scale3d(1.07, 1, 1); + } + + 57% { + opacity: 1; + transform: translate3d(-5.58%, 0, 0) scale3d(1.09, 1, 1); + } + + 61% { + transform: translate3d(-2.12%, 0, 0) scale3d(1.11, 1, 1); + } + + 65% { + transform: translate3d(2.57%, 0, 0) scale3d(1.14, 1, 1); + } + + 70% { + transform: translate3d(8.6%, 0, 0) scale3d(1.17, 1, 1); + } + + 74% { + transform: translate3d(16.13%, 0, 0) scale3d(1.2, 1, 1); + } + + 78% { + transform: translate3d(25.28%, 0, 0) scale3d(1.24, 1, 1); + } + + 83% { + transform: translate3d(36.18%, 0, 0) scale3d(1.28, 1, 1); + } + + 87% { + transform: translate3d(48.97%, 0, 0) scale3d(1.33, 1, 1); + } + + 91% { + transform: translate3d(63.78%, 0, 0) scale3d(1.38, 1, 1); + } + + 96% { + transform: translate3d(80.75%, 0, 0) scale3d(1.44, 1, 1); + } + + to { + opacity: 0; + transform: translate3d(100%, 0, 0) scale3d(1.5, 1, 1); + } +} + +.swoopOutRight { + animation-name: swoopOutRight; +} diff --git a/source/swoop_exits/swoopOutUp.css b/source/swoop_exits/swoopOutUp.css new file mode 100644 index 000000000..2d99e70a8 --- /dev/null +++ b/source/swoop_exits/swoopOutUp.css @@ -0,0 +1,103 @@ +@keyframes swoopOutUp { + from { + transform: translate3d(0, 0, 0) scale3d(1, 1, 1); + } + + 4% { + transform: translate3d(0, 0.3%, 0) scale3d(1, 1, 1); + } + + 9% { + transform: translate3d(0, 1.11%, 0) scale3d(1, 1, 1); + } + + 13% { + transform: translate3d(0, 2.3%, 0) scale3d(1, 1, 1); + } + + 17% { + transform: translate3d(0, 3.73%, 0) scale3d(1, 1, 1); + } + + 22% { + transform: translate3d(0, 5.27%, 0) scale3d(1, 1.01, 1); + } + + 26% { + transform: translate3d(0, 6.78%, 0) scale3d(1, 1.01, 1); + } + + 30% { + transform: translate3d(0, 8.15%, 0) scale3d(1, 1.01, 1); + } + + 35% { + transform: translate3d(0, 9.22%, 0) scale3d(1, 1.02, 1); + } + + 39% { + transform: translate3d(0, 9.87%, 0) scale3d(1, 1.03, 1); + } + + 43% { + transform: translate3d(0, 9.96%, 0) scale3d(1, 1.04, 1); + } + + 48% { + transform: translate3d(0, 9.37%, 0) scale3d(1, 1.05, 1); + } + + 52% { + transform: translate3d(0, 7.95%, 0) scale3d(1, 1.07, 1); + } + + 57% { + opacity: 1; + transform: translate3d(0, 5.58%, 0) scale3d(1, 1.09, 1); + } + + 61% { + transform: translate3d(0, 2.12%, 0) scale3d(1, 1.11, 1); + } + + 65% { + transform: translate3d(0, -2.57%, 0) scale3d(1, 1.14, 1); + } + + 70% { + transform: translate3d(0, -8.6%, 0) scale3d(1, 1.17, 1); + } + + 74% { + transform: translate3d(0, -16.13%, 0) scale3d(1, 1.2, 1); + } + + 78% { + transform: translate3d(0, -25.28%, 0) scale3d(1, 1.24, 1); + } + + 83% { + transform: translate3d(0, -36.18%, 0) scale3d(1, 1.28, 1); + } + + 87% { + transform: translate3d(0, -48.97%, 0) scale3d(1, 1.33, 1); + } + + 91% { + transform: translate3d(0, -63.78%, 0) scale3d(1, 1.38, 1); + } + + 96% { + transform: translate3d(0, -80.75%, 0) scale3d(1, 1.44, 1); + } + + to { + opacity: 0; + transform: translate3d(0, -100%, 0) scale3d(1, 1.5, 1); + } +} + +.swoopOutUp { + animation-name: swoopOutUp; +}