#Transtion

const [isShowing, setIsShowing] = useState(true);
const [, , resetIsShowing] = useTimeoutFn(() => setIsShowing(true), 500);

return (
  <div>
    <MainEcosystem>
      <div>
        <div className="flex flex-col bg-black items-center py-16">
          <div className="w-32 h-32">
            <Transition
              as={Fragment}
              show={isShowing}
              enter="transform transtion duration-[400ms]"
              enterFrom="opactiy-0 rotate-[-120deg] scale-50"
              enterTo="opactiy-100 rotate-0 scale-100"
              leave="transform duration-200 transtion ease-in-out"
              leaveFrom="opactiy-100 rotate-0 scale-100"
              leaveTo="opactiy-0 scale-95"
            >
              <div className="w-full h-full bg-white rounded-md shadow-lg" />
            </Transition>
          </div>
        </div>
        <button
          onClick={() => {
            setIsShowing(false);
            resetIsShowing();
          }}
          className="flex items-center px-3 py-2 mt-8 text-sm font-medium text-white transtion transform bg-black rounded-full backface-visibility-hidden active:bg-opacity-40 hover:scale-105 hover:bg-opacity-30 focus:outline-none bg-opacity-20"
        >
          <span className="ml-3">Click to transtion</span>
        </button>
      </div>
    </MainEcosystem>
  </div>
);