Skip to content

Commit

Permalink
use less shift on ended state
Browse files Browse the repository at this point in the history
  • Loading branch information
Pavel Mineev committed Mar 17, 2021
1 parent 56a30b3 commit a693b0e
Showing 1 changed file with 5 additions and 4 deletions.
9 changes: 5 additions & 4 deletions components/Player.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export default function Player({
.frame {
--delay: ${duration - progress}ms;
box-shadow: inset 0 0 0 1px #000;
display: flex;
box-sizing: border-box;
width: 100%;
Expand Down Expand Up @@ -75,7 +76,7 @@ export default function Player({
flex-grow: 1;
overflow: hidden;
align-items: center;
animation: shift-6 0.2s;
animation: shift-5 0.2s;
animation-fill-mode: forwards;
animation-delay: var(--delay);
animation-play-state: ${isPlaying ? "running" : "paused"};
Expand All @@ -86,7 +87,7 @@ export default function Player({
height: 20px;
overflow: hidden;
flex-shrink: 0;
animation: shift-6 0.2s;
animation: shift-5 0.2s;
animation-fill-mode: forwards;
animation-delay: var(--delay);
}
Expand All @@ -113,12 +114,12 @@ export default function Player({
transform: translateY(100%);
}
}
@keyframes shift-6 {
@keyframes shift-5 {
0% {
transform: translateY(0);
}
100% {
transform: translateY(6px);
transform: translateY(5px);
}
}
@keyframes shift-half {
Expand Down

1 comment on commit a693b0e

@vercel
Copy link

@vercel vercel bot commented on a693b0e Mar 17, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.