I'm having an issue with the animated border on Firefox. It works perfectly on Chrome, but on Firefox, the border doesn't show up at all and the animation is not working. I need some help with this.
Here is the CSS file:
@import "keyframes.css";
@layer components {
.animated-chevron {
@apply relative;
&:before {
@apply content-[''] absolute w-0 h-[0.18rem] top-[41%] right-[-0.05rem] mr-[0.5rem] bg-current rounded group-hover:w-[0.55rem] group-hover:md:w-[0.7rem] transition-all duration-medium;
}
}
}
@layer utilities {
.splash {
@apply relative overflow-hidden;
&:after {
@apply content-[''] absolute block bg-white w-0 h-0 hover:w-[100%] hover:h-[100%] top-1/2 left-1/2 opacity-[0.15] rounded-full -translate-x-1/2 -translate-y-1/2 transition-all duration-long;
}
}
.animated-border {
@apply relative;
&:before,
&:after {
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
@apply content-[''] absolute inset-0 rounded-primary border-[1.5px] border-transparent filter contrast-[6] bg-current pointer-events-none transition-all duration-1000;
}
&:after {
background: linear-gradient(var(--angle), var(--tw-gradient-stops)) border-box;
@apply animate-[rotate_4s_linear_infinite] opacity-0 hover:opacity-100;
}
}
.animated-border-static {
@apply animated-border from-primary-light via-black via-[70%] to-gray-light after:opacity-100;
&:before {
all: unset;
}
}
}
JSX file:
import { twMerge } from "tailwind-merge";
const StatusCard = ({ className, title, subtitle, icon: Icon }) => {
return (
<div
className={twMerge(
"group w-full flex flex-col place-items-center relative py-5 px-3 md:py-7 md:px-7 gap-1 animated-border-static revert",
className
)}
>
<div className="opacity-80 mb-3 transform scale-75 md:scale-100 rounded-2xl p-5 flex aspect-square rotate-45 md:mt-2 bg-gray-200">
<Icon className="w-8 h-8 -rotate-45 fill-black" />
</div>
<span className="font-semibold text-sm md:text-base -mt-3 md:mt-2">{title}</span>
<span className="font-medium text-sm md:text-base">{subtitle}</span>
</div>
);
};
export default StatusCard;
Keyframes.css
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes rotate {
to {
--angle: 360deg;
}
}
When I comment out the :
:before {
all: unset;
}
The border starts showing up in Firefox, but the animation still isn't working. It seems like Firefox may have an issue with pseudo-selectors.