radex
/
jspaint
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Not quite... (animation jumps when interrupted)

main
Isaiah Odhner 2021-12-02 02:25:05 -05:00
parent fa1c9b6f2c
commit 60062d8505
2 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/theme.js
View File

@ -82,6 +82,9 @@
set_theme(new_theme);
button.remove();
};
button.onmouseenter = () => {
button.classList.add("enable-reverse-animation"); // needed for reverse animation to not play at page load
};
document.body.appendChild(button);
grinch_button = button;
}

11
styles/themes/winter.css
View File

@ -160,6 +160,9 @@ button.grinch-button {
background-color: transparent;
cursor: pointer;
}
button.grinch-button.enable-reverse-animation {
animation: grinch-smile-reverse 2s steps(37) forwards;
}
button.grinch-button:hover {
animation: grinch-smile 2s steps(37) forwards;
}
@ -171,3 +174,11 @@ button.grinch-button:hover {
background-position: -3700px 0;
}
}
@keyframes grinch-smile-reverse {
from {
background-position: -3700px 0;
}
to {
background-position: 0 0;
}
}