jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-07-27 12:56:03 -04:00
Code Issues Activity

fix animation choppiness on header link hovers (mainly on Chrome)

Browse Source
This commit is contained in:
jake
2021-05-18 10:44:40 -04:00
parent 40ed315b66
commit eca46a881a
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/sass/components/_animation.scss
+2 -2
View File
@@ -6,14 +6,14 @@
animation: wave 5s infinite; animation: wave 5s infinite;
animation-delay: 1s; animation-delay: 1s;
transform-origin: 65% 80%; transform-origin: 65% 80%;
will-change: transform; will-change: transform; // stylelint-disable-line plugin/no-unsupported-browser-features
} }
.beat { .beat {
display: inline-block; display: inline-block;
animation: beat 10s infinite; // 6 bpm, call 911 if you see this please. animation: beat 10s infinite; // 6 bpm, call 911 if you see this please.
animation-delay: 7.5s; // offset from wave animation animation-delay: 7.5s; // offset from wave animation
will-change: transform; will-change: transform; // stylelint-disable-line plugin/no-unsupported-browser-features
} }
@keyframes wave { @keyframes wave {
assets/sass/components/_header.scss
+3 -2
View File
@@ -29,7 +29,7 @@ header {
} }
span#name { span#name {
margin: 1.1em 0 1.1em 0.725em; margin: 1.1em 0 1.1em 0.8em;
font-size: 1.35em; font-size: 1.35em;
font-weight: 500; font-weight: 500;
line-height: 1; line-height: 1;
@@ -76,6 +76,7 @@ header {
a { a {
display: inline-block; display: inline-block;
transition: transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out;
will-change: transform; // stylelint-disable-line plugin/no-unsupported-browser-features
@include colors() { @include colors() {
color: c(medium-dark); color: c(medium-dark);
@@ -98,7 +99,7 @@ header {
font-size: 0.95em; font-size: 0.95em;
font-weight: 500; font-weight: 500;
letter-spacing: -0.002em; letter-spacing: -0.002em;
margin-left: 0.55em; margin-left: 0.6em;
} }
} }