From 0bd0376ef61084d9b0906f625dc040eb4a3cfd01 Mon Sep 17 00:00:00 2001 From: Emmanuel Ulloa Arguello Date: Tue, 23 Apr 2024 11:01:38 -0600 Subject: [PATCH 1/4] Adding swoop entrance and exit animations. --- source/swoop_entrances/swoopInDown.css | 101 +++++++++++++++++++++++ source/swoop_entrances/swoopInLeft.css | 103 ++++++++++++++++++++++++ source/swoop_entrances/swoopInRight.css | 103 ++++++++++++++++++++++++ source/swoop_entrances/swoopInUp.css | 103 ++++++++++++++++++++++++ source/swoop_exits/swoopOutDown.css | 103 ++++++++++++++++++++++++ source/swoop_exits/swoopOutLeft.css | 103 ++++++++++++++++++++++++ source/swoop_exits/swoopOutRight.css | 103 ++++++++++++++++++++++++ source/swoop_exits/swoopOutUp.css | 103 ++++++++++++++++++++++++ 8 files changed, 822 insertions(+) create mode 100644 source/swoop_entrances/swoopInDown.css create mode 100644 source/swoop_entrances/swoopInLeft.css create mode 100644 source/swoop_entrances/swoopInRight.css create mode 100644 source/swoop_entrances/swoopInUp.css create mode 100644 source/swoop_exits/swoopOutDown.css create mode 100644 source/swoop_exits/swoopOutLeft.css create mode 100644 source/swoop_exits/swoopOutRight.css create mode 100644 source/swoop_exits/swoopOutUp.css diff --git a/source/swoop_entrances/swoopInDown.css b/source/swoop_entrances/swoopInDown.css new file mode 100644 index 000000000..299bd1afe --- /dev/null +++ b/source/swoop_entrances/swoopInDown.css @@ -0,0 +1,101 @@ +@keyframes swoopInDown { + 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% { + 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); + } + + 100% { + 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..b5fa50ecb --- /dev/null +++ b/source/swoop_entrances/swoopInLeft.css @@ -0,0 +1,103 @@ +@keyframes swoopInLeft { + 0% { + 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% { + opacity: 1; + 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% { + 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); + } + + 100% { + 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..f63f3754e --- /dev/null +++ b/source/swoop_entrances/swoopInRight.css @@ -0,0 +1,103 @@ +@keyframes swoopInRight { + 0% { + 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% { + opacity: 1; + 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% { + 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); + } + + 100% { + 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..79c6cc901 --- /dev/null +++ b/source/swoop_entrances/swoopInUp.css @@ -0,0 +1,103 @@ +@keyframes swoopInUp { + 0% { + 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% { + opacity: 1; + 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% { + 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); + } + + 100% { + 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..77c3dcd45 --- /dev/null +++ b/source/swoop_exits/swoopOutDown.css @@ -0,0 +1,103 @@ +@keyframes swoopOutDown { + 0% { + 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% { + 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% { + opacity: 1; + transform: translate3d(0, 63.78%, 0) scale3d(1, 1.38, 1); + } + + 96% { + transform: translate3d(0, 80.75%, 0) scale3d(1, 1.44, 1); + } + + 100% { + 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..1b0f5339e --- /dev/null +++ b/source/swoop_exits/swoopOutLeft.css @@ -0,0 +1,103 @@ +@keyframes swoopOutLeft { + 0% { + 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% { + 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% { + opacity: 1; + transform: translate3d(-63.78%, 0, 0) scale3d(1.38, 1, 1); + } + + 96% { + transform: translate3d(-80.75%, 0, 0) scale3d(1.44, 1, 1); + } + + 100% { + 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..f3c2c7824 --- /dev/null +++ b/source/swoop_exits/swoopOutRight.css @@ -0,0 +1,103 @@ +@keyframes swoopOutRight { + 0% { + 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% { + 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% { + opacity: 1; + transform: translate3d(63.78%, 0, 0) scale3d(1.38, 1, 1); + } + + 96% { + transform: translate3d(80.75%, 0, 0) scale3d(1.44, 1, 1); + } + + 100% { + 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..ce2b31346 --- /dev/null +++ b/source/swoop_exits/swoopOutUp.css @@ -0,0 +1,103 @@ +@keyframes swoopOutUp { + 0% { + 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% { + 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% { + opacity: 1; + transform: translate3d(0, -63.78%, 0) scale3d(1, 1.38, 1); + } + + 96% { + transform: translate3d(0, -80.75%, 0) scale3d(1, 1.44, 1); + } + + 100% { + opacity: 0; + transform: translate3d(0, -100%, 0) scale3d(1, 1.5, 1); + } +} + +.swoopOutUp { + animation-name: swoopOutUp; +} From 55ec1e7e60c742c88d0d9b644420b55aa6447eda Mon Sep 17 00:00:00 2001 From: Emmanuel Ulloa Arguello Date: Tue, 23 Apr 2024 13:09:52 -0600 Subject: [PATCH 2/4] Changed 0% to "from" and 100% to "to" --- source/swoop_entrances/swoopInDown.css | 4 ++-- source/swoop_entrances/swoopInLeft.css | 4 ++-- source/swoop_entrances/swoopInRight.css | 4 ++-- source/swoop_entrances/swoopInUp.css | 4 ++-- source/swoop_exits/swoopOutDown.css | 4 ++-- source/swoop_exits/swoopOutLeft.css | 4 ++-- source/swoop_exits/swoopOutRight.css | 4 ++-- source/swoop_exits/swoopOutUp.css | 4 ++-- 8 files changed, 16 insertions(+), 16 deletions(-) diff --git a/source/swoop_entrances/swoopInDown.css b/source/swoop_entrances/swoopInDown.css index 299bd1afe..a6ad9aac1 100644 --- a/source/swoop_entrances/swoopInDown.css +++ b/source/swoop_entrances/swoopInDown.css @@ -1,5 +1,5 @@ @keyframes swoopInDown { - 0% { + from { transform: translate3d(0, 100%, 0) scale3d(1, 1.5, 1); } @@ -91,7 +91,7 @@ transform: translate3d(0, -0.3%, 0) scale3d(1, 1, 1); } - 100% { + to { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } diff --git a/source/swoop_entrances/swoopInLeft.css b/source/swoop_entrances/swoopInLeft.css index b5fa50ecb..8c3806bdd 100644 --- a/source/swoop_entrances/swoopInLeft.css +++ b/source/swoop_entrances/swoopInLeft.css @@ -1,5 +1,5 @@ @keyframes swoopInLeft { - 0% { + from { opacity: 0; transform: translate3d(-100%, 0, 0) scale3d(1.5, 1, 1); } @@ -93,7 +93,7 @@ transform: translate3d(0.3%, 0, 0) scale3d(1, 1, 1); } - 100% { + to { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } diff --git a/source/swoop_entrances/swoopInRight.css b/source/swoop_entrances/swoopInRight.css index f63f3754e..c0db8bb46 100644 --- a/source/swoop_entrances/swoopInRight.css +++ b/source/swoop_entrances/swoopInRight.css @@ -1,5 +1,5 @@ @keyframes swoopInRight { - 0% { + from { opacity: 0; transform: translate3d(100%, 0, 0) scale3d(1.5, 1, 1); } @@ -93,7 +93,7 @@ transform: translate3d(-0.3%, 0, 0) scale3d(1, 1, 1); } - 100% { + to { transform: translate3d(0%, 0, 0) scale3d(1, 1, 1); } } diff --git a/source/swoop_entrances/swoopInUp.css b/source/swoop_entrances/swoopInUp.css index 79c6cc901..132145222 100644 --- a/source/swoop_entrances/swoopInUp.css +++ b/source/swoop_entrances/swoopInUp.css @@ -1,5 +1,5 @@ @keyframes swoopInUp { - 0% { + from { opacity: 0; transform: translate3d(0, -100%, 0) scale3d(1, 1.5, 1); } @@ -93,7 +93,7 @@ transform: translate3d(0, 0.3%, 0) scale3d(1, 1, 1); } - 100% { + to { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } } diff --git a/source/swoop_exits/swoopOutDown.css b/source/swoop_exits/swoopOutDown.css index 77c3dcd45..8c498e7cc 100644 --- a/source/swoop_exits/swoopOutDown.css +++ b/source/swoop_exits/swoopOutDown.css @@ -1,5 +1,5 @@ @keyframes swoopOutDown { - 0% { + from { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } @@ -92,7 +92,7 @@ transform: translate3d(0, 80.75%, 0) scale3d(1, 1.44, 1); } - 100% { + to { opacity: 0; transform: translate3d(0, 100%, 0) scale3d(1, 1.5, 1); } diff --git a/source/swoop_exits/swoopOutLeft.css b/source/swoop_exits/swoopOutLeft.css index 1b0f5339e..b1f3f62d0 100644 --- a/source/swoop_exits/swoopOutLeft.css +++ b/source/swoop_exits/swoopOutLeft.css @@ -1,5 +1,5 @@ @keyframes swoopOutLeft { - 0% { + from { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } @@ -92,7 +92,7 @@ transform: translate3d(-80.75%, 0, 0) scale3d(1.44, 1, 1); } - 100% { + to { opacity: 0; transform: translate3d(-100%, 0, 0) scale3d(1.5, 1, 1); } diff --git a/source/swoop_exits/swoopOutRight.css b/source/swoop_exits/swoopOutRight.css index f3c2c7824..d3c461bc9 100644 --- a/source/swoop_exits/swoopOutRight.css +++ b/source/swoop_exits/swoopOutRight.css @@ -1,5 +1,5 @@ @keyframes swoopOutRight { - 0% { + from { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } @@ -92,7 +92,7 @@ transform: translate3d(80.75%, 0, 0) scale3d(1.44, 1, 1); } - 100% { + to { opacity: 0; transform: translate3d(100%, 0, 0) scale3d(1.5, 1, 1); } diff --git a/source/swoop_exits/swoopOutUp.css b/source/swoop_exits/swoopOutUp.css index ce2b31346..c34d85d49 100644 --- a/source/swoop_exits/swoopOutUp.css +++ b/source/swoop_exits/swoopOutUp.css @@ -1,5 +1,5 @@ @keyframes swoopOutUp { - 0% { + from { transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } @@ -92,7 +92,7 @@ transform: translate3d(0, -80.75%, 0) scale3d(1, 1.44, 1); } - 100% { + to { opacity: 0; transform: translate3d(0, -100%, 0) scale3d(1, 1.5, 1); } From 3ef0e69eb40f29bc192395131cad89ef13de5b7f Mon Sep 17 00:00:00 2001 From: Emmanuel Ulloa Arguello Date: Thu, 9 May 2024 11:06:16 -0600 Subject: [PATCH 3/4] Changed opacity change position. As suggested by Dan Eden, I changed the opacity value change to last longer so is more visually perceived when the element enters and leave. --- source/swoop_entrances/swoopInDown.css | 2 ++ source/swoop_entrances/swoopInLeft.css | 2 +- source/swoop_entrances/swoopInRight.css | 2 +- source/swoop_entrances/swoopInUp.css | 2 +- source/swoop_exits/swoopOutDown.css | 2 +- source/swoop_exits/swoopOutLeft.css | 2 +- source/swoop_exits/swoopOutRight.css | 2 +- source/swoop_exits/swoopOutUp.css | 2 +- 8 files changed, 9 insertions(+), 7 deletions(-) diff --git a/source/swoop_entrances/swoopInDown.css b/source/swoop_entrances/swoopInDown.css index a6ad9aac1..31121080e 100644 --- a/source/swoop_entrances/swoopInDown.css +++ b/source/swoop_entrances/swoopInDown.css @@ -1,5 +1,6 @@ @keyframes swoopInDown { from { + opacity: 0; transform: translate3d(0, 100%, 0) scale3d(1, 1.5, 1); } @@ -60,6 +61,7 @@ } 65% { + opacity: 1; transform: translate3d(0, -9.22%, 0) scale3d(1, 1.02, 1); } diff --git a/source/swoop_entrances/swoopInLeft.css b/source/swoop_entrances/swoopInLeft.css index 8c3806bdd..68df86f51 100644 --- a/source/swoop_entrances/swoopInLeft.css +++ b/source/swoop_entrances/swoopInLeft.css @@ -9,7 +9,6 @@ } 9% { - opacity: 1; transform: translate3d(-63.78%, 0, 0) scale3d(1.38, 1, 1); } @@ -62,6 +61,7 @@ } 65% { + opacity: 1; transform: translate3d(9.22%, 0, 0) scale3d(1.02, 1, 1); } diff --git a/source/swoop_entrances/swoopInRight.css b/source/swoop_entrances/swoopInRight.css index c0db8bb46..832beaa46 100644 --- a/source/swoop_entrances/swoopInRight.css +++ b/source/swoop_entrances/swoopInRight.css @@ -9,7 +9,6 @@ } 9% { - opacity: 1; transform: translate3d(63.78%, 0, 0) scale3d(1.38, 1, 1); } @@ -62,6 +61,7 @@ } 65% { + opacity: 1; transform: translate3d(-9.22%, 0, 0) scale3d(1.02, 1, 1); } diff --git a/source/swoop_entrances/swoopInUp.css b/source/swoop_entrances/swoopInUp.css index 132145222..6d7d5f3d2 100644 --- a/source/swoop_entrances/swoopInUp.css +++ b/source/swoop_entrances/swoopInUp.css @@ -9,7 +9,6 @@ } 9% { - opacity: 1; transform: translate3d(0, -63.78%, 0) scale3d(1, 1.38, 1); } @@ -62,6 +61,7 @@ } 65% { + opacity: 1; transform: translate3d(0, 9.22%, 0) scale3d(1, 1.02, 1); } diff --git a/source/swoop_exits/swoopOutDown.css b/source/swoop_exits/swoopOutDown.css index 8c498e7cc..b4fa94a46 100644 --- a/source/swoop_exits/swoopOutDown.css +++ b/source/swoop_exits/swoopOutDown.css @@ -60,6 +60,7 @@ } 65% { + opacity: 1; transform: translate3d(0, 2.57%, 0) scale3d(1, 1.14, 1); } @@ -84,7 +85,6 @@ } 91% { - opacity: 1; transform: translate3d(0, 63.78%, 0) scale3d(1, 1.38, 1); } diff --git a/source/swoop_exits/swoopOutLeft.css b/source/swoop_exits/swoopOutLeft.css index b1f3f62d0..d4f48dafc 100644 --- a/source/swoop_exits/swoopOutLeft.css +++ b/source/swoop_exits/swoopOutLeft.css @@ -60,6 +60,7 @@ } 65% { + opacity: 1; transform: translate3d(-2.57%, 0, 0) scale3d(1.14, 1, 1); } @@ -84,7 +85,6 @@ } 91% { - opacity: 1; transform: translate3d(-63.78%, 0, 0) scale3d(1.38, 1, 1); } diff --git a/source/swoop_exits/swoopOutRight.css b/source/swoop_exits/swoopOutRight.css index d3c461bc9..4042cf513 100644 --- a/source/swoop_exits/swoopOutRight.css +++ b/source/swoop_exits/swoopOutRight.css @@ -60,6 +60,7 @@ } 65% { + opacity: 1; transform: translate3d(2.57%, 0, 0) scale3d(1.14, 1, 1); } @@ -84,7 +85,6 @@ } 91% { - opacity: 1; transform: translate3d(63.78%, 0, 0) scale3d(1.38, 1, 1); } diff --git a/source/swoop_exits/swoopOutUp.css b/source/swoop_exits/swoopOutUp.css index c34d85d49..591b0dbe2 100644 --- a/source/swoop_exits/swoopOutUp.css +++ b/source/swoop_exits/swoopOutUp.css @@ -60,6 +60,7 @@ } 65% { + opacity: 1; transform: translate3d(0, -2.57%, 0) scale3d(1, 1.14, 1); } @@ -84,7 +85,6 @@ } 91% { - opacity: 1; transform: translate3d(0, -63.78%, 0) scale3d(1, 1.38, 1); } From c8b65dec8f95cae6b160b88520f80756bc2f15c5 Mon Sep 17 00:00:00 2001 From: Emmanuel Ulloa Arguello Date: Mon, 13 May 2024 14:41:01 -0600 Subject: [PATCH 4/4] Moved the opacity change to a more middle position. --- source/swoop_entrances/swoopInDown.css | 2 +- source/swoop_entrances/swoopInLeft.css | 2 +- source/swoop_entrances/swoopInRight.css | 2 +- source/swoop_entrances/swoopInUp.css | 2 +- source/swoop_exits/swoopOutDown.css | 2 +- source/swoop_exits/swoopOutLeft.css | 2 +- source/swoop_exits/swoopOutRight.css | 2 +- source/swoop_exits/swoopOutUp.css | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/source/swoop_entrances/swoopInDown.css b/source/swoop_entrances/swoopInDown.css index 31121080e..367f1a6e1 100644 --- a/source/swoop_entrances/swoopInDown.css +++ b/source/swoop_entrances/swoopInDown.css @@ -53,6 +53,7 @@ } 57% { + opacity: 1; transform: translate3d(0, -9.96%, 0) scale3d(1, 1.04, 1); } @@ -61,7 +62,6 @@ } 65% { - opacity: 1; transform: translate3d(0, -9.22%, 0) scale3d(1, 1.02, 1); } diff --git a/source/swoop_entrances/swoopInLeft.css b/source/swoop_entrances/swoopInLeft.css index 68df86f51..f8f95b7a5 100644 --- a/source/swoop_entrances/swoopInLeft.css +++ b/source/swoop_entrances/swoopInLeft.css @@ -53,6 +53,7 @@ } 57% { + opacity: 1; transform: translate3d(9.96%, 0, 0) scale3d(1.04, 1, 1); } @@ -61,7 +62,6 @@ } 65% { - opacity: 1; transform: translate3d(9.22%, 0, 0) scale3d(1.02, 1, 1); } diff --git a/source/swoop_entrances/swoopInRight.css b/source/swoop_entrances/swoopInRight.css index 832beaa46..66d3790b1 100644 --- a/source/swoop_entrances/swoopInRight.css +++ b/source/swoop_entrances/swoopInRight.css @@ -53,6 +53,7 @@ } 57% { + opacity: 1; transform: translate3d(-9.96%, 0, 0) scale3d(1.04, 1, 1); } @@ -61,7 +62,6 @@ } 65% { - opacity: 1; transform: translate3d(-9.22%, 0, 0) scale3d(1.02, 1, 1); } diff --git a/source/swoop_entrances/swoopInUp.css b/source/swoop_entrances/swoopInUp.css index 6d7d5f3d2..b0f25f25b 100644 --- a/source/swoop_entrances/swoopInUp.css +++ b/source/swoop_entrances/swoopInUp.css @@ -53,6 +53,7 @@ } 57% { + opacity: 1; transform: translate3d(0, 9.96%, 0) scale3d(1, 1.04, 1); } @@ -61,7 +62,6 @@ } 65% { - opacity: 1; transform: translate3d(0, 9.22%, 0) scale3d(1, 1.02, 1); } diff --git a/source/swoop_exits/swoopOutDown.css b/source/swoop_exits/swoopOutDown.css index b4fa94a46..f96857267 100644 --- a/source/swoop_exits/swoopOutDown.css +++ b/source/swoop_exits/swoopOutDown.css @@ -52,6 +52,7 @@ } 57% { + opacity: 1; transform: translate3d(0, -5.58%, 0) scale3d(1, 1.09, 1); } @@ -60,7 +61,6 @@ } 65% { - opacity: 1; transform: translate3d(0, 2.57%, 0) scale3d(1, 1.14, 1); } diff --git a/source/swoop_exits/swoopOutLeft.css b/source/swoop_exits/swoopOutLeft.css index d4f48dafc..f55572ff6 100644 --- a/source/swoop_exits/swoopOutLeft.css +++ b/source/swoop_exits/swoopOutLeft.css @@ -52,6 +52,7 @@ } 57% { + opacity: 1; transform: translate3d(5.58%, 0, 0) scale3d(1.09, 1, 1); } @@ -60,7 +61,6 @@ } 65% { - opacity: 1; transform: translate3d(-2.57%, 0, 0) scale3d(1.14, 1, 1); } diff --git a/source/swoop_exits/swoopOutRight.css b/source/swoop_exits/swoopOutRight.css index 4042cf513..f1f81ea84 100644 --- a/source/swoop_exits/swoopOutRight.css +++ b/source/swoop_exits/swoopOutRight.css @@ -52,6 +52,7 @@ } 57% { + opacity: 1; transform: translate3d(-5.58%, 0, 0) scale3d(1.09, 1, 1); } @@ -60,7 +61,6 @@ } 65% { - opacity: 1; transform: translate3d(2.57%, 0, 0) scale3d(1.14, 1, 1); } diff --git a/source/swoop_exits/swoopOutUp.css b/source/swoop_exits/swoopOutUp.css index 591b0dbe2..2d99e70a8 100644 --- a/source/swoop_exits/swoopOutUp.css +++ b/source/swoop_exits/swoopOutUp.css @@ -52,6 +52,7 @@ } 57% { + opacity: 1; transform: translate3d(0, 5.58%, 0) scale3d(1, 1.09, 1); } @@ -60,7 +61,6 @@ } 65% { - opacity: 1; transform: translate3d(0, -2.57%, 0) scale3d(1, 1.14, 1); }