diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-02-18 19:36:23 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-02-18 19:36:23 +0100 |
| commit | ad00b2dc9492d20b3b8c3dcd7c5b425ee7f8d404 (patch) | |
| tree | 2530905a57d08a3f2933cf24c37c3f42278d22be /src/components/Branding/Branding.module.scss | |
| parent | c0f7c1c22749b66a0ec588753e7f705f3ca4224e (diff) | |
refactor(animations): replace width animations with transform
Animations based on width or height can be expensive and can cause
lower performances. So, instead I use transform to obtain the same
effect.
Diffstat (limited to 'src/components/Branding/Branding.module.scss')
| -rw-r--r-- | src/components/Branding/Branding.module.scss | 8 |
1 files changed, 6 insertions, 2 deletions
diff --git a/src/components/Branding/Branding.module.scss b/src/components/Branding/Branding.module.scss index 402fa8b..ed2cc16 100644 --- a/src/components/Branding/Branding.module.scss +++ b/src/components/Branding/Branding.module.scss @@ -95,7 +95,7 @@ &::after { content: "|"; display: block; - width: 0; + width: 100%; height: 100%; position: absolute; top: 0; @@ -104,6 +104,8 @@ color: var(--color-primary-darker); font-weight: 400; visibility: hidden; + transform: scaleX(0) translateX(100%); + transform-origin: right; animation: var(--branding-name-animation); } } @@ -124,7 +126,7 @@ &::after { content: "|"; display: block; - width: 0; + width: 100%; height: 100%; position: absolute; top: 0; @@ -133,6 +135,8 @@ color: var(--color-primary-darker); font-weight: 400; visibility: hidden; + transform: scaleX(0) translateX(100%); + transform-origin: right; animation: var(--branding-job-animation); } } |