From 5bab4502a098eb0e3b5a59b68bc9d8d23529ea55 Mon Sep 17 00:00:00 2001 From: Arne Rief Date: Fri, 10 Feb 2023 21:40:00 +0100 Subject: Desktop version --- sass/abstracts/_animations.scss | 32 ++++++++++++++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 sass/abstracts/_animations.scss (limited to 'sass/abstracts/_animations.scss') 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); + } +} -- cgit v1.2.3