Skip to content

Commit 0188acd

Browse files
Copilothustcc
andcommitted
Update to true jumping animation with vertical bounce
Co-authored-by: hustcc <7856674+hustcc@users.noreply.github.com>
1 parent 92955e2 commit 0188acd

1 file changed

Lines changed: 25 additions & 7 deletions

File tree

site/src/index.css

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ body {
1414
background-color: #f8fbfc;
1515
}
1616

17-
/* Playful left-right bouncing animation that respects prefers-reduced-motion */
17+
/* Playful left-right jumping animation that respects prefers-reduced-motion */
1818
.ava-pulse {
1919
display: inline-block;
20-
animation: bounce-horizontal 1.5s ease-in-out infinite;
20+
animation: jump-horizontal 1.2s ease-in-out infinite;
2121
}
2222

2323
@media (prefers-reduced-motion: reduce) {
@@ -26,15 +26,33 @@ body {
2626
}
2727
}
2828

29-
@keyframes bounce-horizontal {
30-
0%, 100% {
31-
transform: translateX(0);
29+
@keyframes jump-horizontal {
30+
0% {
31+
transform: translate(0, 0);
32+
}
33+
12.5% {
34+
transform: translate(-3px, -8px);
3235
}
3336
25% {
34-
transform: translateX(-5px);
37+
transform: translate(-5px, 0);
38+
}
39+
37.5% {
40+
transform: translate(-3px, -8px);
41+
}
42+
50% {
43+
transform: translate(0, 0);
44+
}
45+
62.5% {
46+
transform: translate(3px, -8px);
3547
}
3648
75% {
37-
transform: translateX(5px);
49+
transform: translate(5px, 0);
50+
}
51+
87.5% {
52+
transform: translate(3px, -8px);
53+
}
54+
100% {
55+
transform: translate(0, 0);
3856
}
3957
}
4058

0 commit comments

Comments
 (0)