My personal site.
theclashfruit.me
feat: animating
+40
-4
+1
-1
app/(main)/layout.tsx
+1
-1
app/(main)/layout.tsx
+33
-1
styles/globals.scss
+33
-1
styles/globals.scss
···
44
44
a {
45
45
color: var(--primary);
46
46
47
-
transition: 100ms;
47
+
transition: 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
48
48
49
49
text-decoration-thickness: 1px;
50
50
···
55
55
56
56
// View Transition
57
57
// TODO: Add some fancy anim
58
+
59
+
@keyframes scale-in {
60
+
from {
61
+
transform: scale(0.96);
62
+
opacity: 0;
63
+
}
64
+
65
+
to {
66
+
transform: scale(1);
67
+
opacity: 1;
68
+
}
69
+
}
70
+
71
+
@keyframes scale-out {
72
+
from {
73
+
transform: scale(1);
74
+
opacity: 1;
75
+
}
76
+
77
+
to {
78
+
transform: scale(0.96);
79
+
opacity: 0;
80
+
}
81
+
}
82
+
83
+
::view-transition-new(.scale) {
84
+
animation: scale-in 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) both;
85
+
}
86
+
87
+
::view-transition-old(.scale) {
88
+
animation: scale-out 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) both;
89
+
}
+6
-2
styles/pages/Links.module.scss
+6
-2
styles/pages/Links.module.scss
···
1
1
.button {
2
2
display: flex;
3
3
4
-
transition: 150ms;
4
+
transition: 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
5
5
6
6
> img:not([src$=".svg"]) {
7
7
image-rendering: pixelated;
8
8
}
9
9
10
-
&:hover {
10
+
&:hover, &:focus {
11
11
scale: 1.5;
12
+
}
13
+
14
+
&:active {
15
+
scale: 1.35;
12
16
}
13
17
}