improve shaking animation

This commit is contained in:
SethBurkart123
2023-10-20 08:37:50 +11:00
parent b7cccdd9b8
commit 7b5db2d89f
2 changed files with 8 additions and 8 deletions
+6 -6
View File
@@ -1,21 +1,21 @@
@keyframes shake {
0% {
transform: translateX(0) rotate(0);
transform: rotate(0);
}
25% {
transform: translateX(-1px) rotate(-1deg);
transform: rotate(-1deg);
}
50% {
transform: translateX(1px) rotate(1deg);
transform: rotate(1deg);
}
75% {
transform: translateX(-1px) rotate(-1deg);
transform: rotate(-1deg);
}
100% {
transform: translateX(0) rotate(0);
transform: rotate(0);
}
}
.animate-shake {
animation: shake 1s linear infinite;
animation: shake 0.5s linear infinite;
}
+2 -2
View File
@@ -109,7 +109,7 @@ const Themes: FC = () => {
<h2 className="pb-2 text-lg font-bold">Images</h2>
<div className="flex flex-wrap gap-4">
{/* Image uploader swatch */}
<div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-900">
<div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-100 dark:bg-zinc-900">
<div className="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500">
{/* Plus icon */}
@@ -134,7 +134,7 @@ const Themes: FC = () => {
<h2 className="py-2 text-lg font-bold">Videos</h2>
<div className="flex flex-wrap gap-4">
{/* Video uploader swatch */}
<div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-900">
<div className="relative w-16 h-16 overflow-hidden transition rounded-xl bg-zinc-100 dark:bg-zinc-900">
<div className="flex items-center justify-center w-full h-full text-3xl font-bold text-gray-400 transition font-IconFamily hover:text-gray-500">
{/* Plus icon */}