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 { @keyframes shake {
0% { 0% {
transform: translateX(0) rotate(0); transform: rotate(0);
} }
25% { 25% {
transform: translateX(-1px) rotate(-1deg); transform: rotate(-1deg);
} }
50% { 50% {
transform: translateX(1px) rotate(1deg); transform: rotate(1deg);
} }
75% { 75% {
transform: translateX(-1px) rotate(-1deg); transform: rotate(-1deg);
} }
100% { 100% {
transform: translateX(0) rotate(0); transform: rotate(0);
} }
} }
.animate-shake { .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> <h2 className="pb-2 text-lg font-bold">Images</h2>
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-4">
{/* Image uploader swatch */} {/* 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"> <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 */} {/* Plus icon */}
@@ -134,7 +134,7 @@ const Themes: FC = () => {
<h2 className="py-2 text-lg font-bold">Videos</h2> <h2 className="py-2 text-lg font-bold">Videos</h2>
<div className="flex flex-wrap gap-4"> <div className="flex flex-wrap gap-4">
{/* Video uploader swatch */} {/* 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"> <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 */} {/* Plus icon */}