My current CSS code below increases the size of the Sidebar (I'm using TreeStyle) from 168px to 430px when you hover over it. It works just fine but the transition is very instant. I'd rather have a smooth transition.

I've tried using transition: width but it doesn't work. Can anybody help?

Current code:

:root {
  --sidebar-normal-width: 168px;
  --sidebar-hover-width: 430px;
  --background-color: rgb(0,0,0);
}

#sidebar-box {
  left: var(--sidebar-normal-width) !important;
  min-width: var(--sidebar-normal-width) !important;
}

#sidebar-box:hover {
  left: var(--sidebar-hover-width) !important;
  min-width: var(--sidebar-hover-width) !important;
}

Other tips to improve/shorten the code are welcomed as well.