okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Smooth Lyric Animation (#1094)

Browse source 
Adds an animation to the lyrics that makes them look more natural.
This commit is contained in:
Monochromish 2022-05-31 21:26:33 +05:30 • committed by GitHub
parent 8af080abb0
commit 66dd74136b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/renderer/style.less
View file

@ -1680,7 +1680,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
.lyric-line.active .verse.verse-active { .lyric-line.active .verse.verse-active {
opacity: 1; animation: lyricVerseAnimation 0.75s ease-in-out forwards;
} }
.lyric-line:hover { .lyric-line:hover {
@ -1703,10 +1703,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.lyric-line.active { .lyric-line.active {
--bgSpeed: 1s; --bgSpeed: 1s;
opacity: 1;
transform: scale(1); transform: scale(1);
/*background: var(--keyColor);*/ /*background: var(--keyColor);*/
transition: transform 0.2s var(--appleEase); transition: transform 0.2s var(--appleEase);
animation: lyricVerseAnimation 1s ease-in-out forwards;
} }
.lyric-line:not(.active) { .lyric-line:not(.active) {
@ -1788,6 +1788,16 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
display: flex; display: flex;
} }
@keyframes lyricVerseAnimation {
0% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@keyframes lyricWaitingLine { @keyframes lyricWaitingLine {
0% { 0% {
opacity: 0.25; opacity: 0.25;