5 replies

Outline transition duration issues

https://gyazo.com/9989a2e09cee6d53cbac555ef24d155a

I'm trying to apply a duration on the outline for the start button, for some reason, it has a weird delay, not sure if you can notice. It immediately loads the outline, a bit, then, immediately loads the rest after. It's not smooth. Here's the code:

function Start() {
  return (
    <>
      <button className="mt-2 cursor-pointer rounded-md border-none border-slate-200 bg-slate-200 px-2 text-[1rem] outline-2 outline-blue-400 duration-100 hover:outline">
        Start
      </button>
    </>
  );
}

function Start() {
  return (
    <>
      <button className="mt-2 cursor-pointer rounded-md border-none border-slate-200 bg-slate-200 px-2 text-[1rem] outline-2 outline-blue-400 duration-100 hover:outline">
        Start
      </button>
    </>
  );
}

function Start() {
  return (
    <>
      <button className="mt-2 cursor-pointer rounded-md border-none border-slate-200 bg-slate-200 px-2 text-[1rem] outline-2 outline-blue-400 duration-100 hover:outline">
        Start
      </button>
    </>
  );
}

function Start() {
  return (
    <>
      <button className="mt-2 cursor-pointer rounded-md border-none border-slate-200 bg-slate-200 px-2 text-[1rem] outline-2 outline-blue-400 duration-100 hover:outline">
        Start
      </button>
    </>
  );
}

Anyone know why?

Gyazo

Gyazo Screen Video

Outline transition duration issues

Similar Threads

Similar Threads

Similar Threads