From 1abaa58760b5f81a6945b70f5372a129ff7fb7f6 Mon Sep 17 00:00:00 2001 From: godfrey Date: Fri, 29 Apr 2022 12:52:14 +0300 Subject: [PATCH 1/5] Add animation keyframes --- src/css/components/headline.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/css/components/headline.css b/src/css/components/headline.css index 1fc5f41..645a036 100644 --- a/src/css/components/headline.css +++ b/src/css/components/headline.css @@ -22,6 +22,10 @@ line-height: 52px; } +@keyframes slide-in { + 100% { transform: translateX(0%); } +} + .headline .headline__text { line-height: 24px; } From 2406d4d4cc61757769177c8f3e2aae881c007646 Mon Sep 17 00:00:00 2001 From: BHDHakim Date: Fri, 29 Apr 2022 10:55:41 +0100 Subject: [PATCH 2/5] Add logo transition --- src/css/components/toolbar.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/css/components/toolbar.css b/src/css/components/toolbar.css index a7ec9c2..34c7d34 100644 --- a/src/css/components/toolbar.css +++ b/src/css/components/toolbar.css @@ -19,6 +19,11 @@ font-weight: var(--font-bold); font-size: 18px; line-height: 20px; + transition:letter-spacing linear 0.5s; +} + +.toolbar .toolbar__logo:hover { + letter-spacing: 2px; } .toolbar .toolbar__menu-button { From e5d501bae323482395820fea3be04545b6017dde Mon Sep 17 00:00:00 2001 From: stephnna Date: Fri, 29 Apr 2022 14:31:29 +0100 Subject: [PATCH 3/5] Modify css for transition effect --- .vscode/settings.json | 3 +++ src/css/components/headline.css | 2 ++ 2 files changed, 5 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..aef8443 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/src/css/components/headline.css b/src/css/components/headline.css index 645a036..b895784 100644 --- a/src/css/components/headline.css +++ b/src/css/components/headline.css @@ -20,6 +20,8 @@ font-weight: var(--font-bold); font-size: var(--text-xxxl); line-height: 52px; + animation: slide-in 0.5s forwards; + transform: translateX(-100%); } @keyframes slide-in { From 06594232acea86b4f2c158eab5a7c02d0dfa978b Mon Sep 17 00:00:00 2001 From: BHDHakim Date: Fri, 29 Apr 2022 15:45:12 +0100 Subject: [PATCH 4/5] Fix Stylelint errors --- src/css/components/toolbar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/components/toolbar.css b/src/css/components/toolbar.css index 34c7d34..177a5a3 100644 --- a/src/css/components/toolbar.css +++ b/src/css/components/toolbar.css @@ -19,7 +19,7 @@ font-weight: var(--font-bold); font-size: 18px; line-height: 20px; - transition:letter-spacing linear 0.5s; + transition: letter-spacing linear 0.5s; } .toolbar .toolbar__logo:hover { From 462e667f80b9b4abc367c2ac7c77b5a487c10c91 Mon Sep 17 00:00:00 2001 From: BHDHakim Date: Fri, 29 Apr 2022 15:53:28 +0100 Subject: [PATCH 5/5] Fix Stylelint errors --- src/css/components/headline.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/css/components/headline.css b/src/css/components/headline.css index b895784..e218b1d 100644 --- a/src/css/components/headline.css +++ b/src/css/components/headline.css @@ -20,8 +20,8 @@ font-weight: var(--font-bold); font-size: var(--text-xxxl); line-height: 52px; - animation: slide-in 0.5s forwards; - transform: translateX(-100%); + animation: slide-in 0.5s forwards; + transform: translateX(-100%); } @keyframes slide-in {