summaryrefslogtreecommitdiff
path: root/sass/abstracts/_animations.scss
diff options
context:
space:
mode:
authorArne Rief <arne.rief@gmail.com>2023-02-10 21:40:00 +0100
committerArne Rief <arne.rief@gmail.com>2023-02-11 14:53:10 +0100
commit5bab4502a098eb0e3b5a59b68bc9d8d23529ea55 (patch)
treeb8a737694d1217f7af9a6884720678a179cacbb0 /sass/abstracts/_animations.scss
Desktop version
Diffstat (limited to 'sass/abstracts/_animations.scss')
-rw-r--r--sass/abstracts/_animations.scss32
1 files changed, 32 insertions, 0 deletions
diff --git a/sass/abstracts/_animations.scss b/sass/abstracts/_animations.scss
new file mode 100644
index 0000000..819b356
--- /dev/null
+++ b/sass/abstracts/_animations.scss
@@ -0,0 +1,32 @@
+@keyframes fade-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+// text start on the left and transparent when the page loads, then moves into regular position
+@keyframes moveInLeft {
+ 0% {
+ opacity: 0;
+ transform: translateX(-10rem);
+ }
+ 100% {
+ opacity: 1;
+ transform: translate(0);
+ }
+}
+
+// skew to match the design of the .text-container class
+@keyframes moveInRight {
+ 0% {
+ opacity: 0;
+ transform: translateX(10rem) skewX(-12deg);
+ }
+ 100% {
+ opacity: 1;
+ transform: translate(0) skewX(-12deg);
+ }
+}