jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-03 17:46:39 -04:00
Code Issues Activity

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

Browse Source
This commit is contained in:
Jake Jarvis
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

4
assets/sass/components/_animation.scss
View File

@ -6,14 +6,14 @@
animation: wave 5s infinite;
animation-delay: 1s;
transform-origin: 65% 80%;
will-change: transform;
will-change: transform; // stylelint-disable-line plugin/no-unsupported-browser-features
}
.beat {
display: inline-block;
animation: beat 10s infinite; // 6 bpm, call 911 if you see this please.
animation-delay: 7.5s; // offset from wave animation
will-change: transform;
will-change: transform; // stylelint-disable-line plugin/no-unsupported-browser-features
}
@keyframes wave {

5
assets/sass/components/_header.scss
View File

@ -29,7 +29,7 @@ header {
}
span#name {
margin: 1.1em 0 1.1em 0.725em;
margin: 1.1em 0 1.1em 0.8em;
font-size: 1.35em;
font-weight: 500;
line-height: 1;
@ -76,6 +76,7 @@ header {
a {
display: inline-block;
transition: transform 0.15s ease-in-out;
will-change: transform; // stylelint-disable-line plugin/no-unsupported-browser-features
@include colors() {
color: c(medium-dark);
@ -98,7 +99,7 @@ header {
font-size: 0.95em;
font-weight: 500;
letter-spacing: -0.002em;
margin-left: 0.55em;
margin-left: 0.6em;
}
}