@@ -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.5 s ease-in-out infinite;
20+ animation : jump -horizontal 1.2 s 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