How to add an animation to the tooltip?

[ghost]

I'll preface this by saying that I'm new to CSS. I would like to add an animation to the tooltip so that it opens gradually and not instantly. I've tried the following inside style.css:

tooltip {
  [...]
  animation: tooltip-animation 2s ease;
}

@keyframes tooltip-animation {
  from {width: 0; height: 0;}
  to {width: auto; height: auto;}
}

and alternatively

@keyframes tooltip-animation {
  from {transform: scale(0);}
  to {transform: scale(1);}
}

Running waybar yields this error: No property named 'width' [or 'transform', in the second case] How can add this animation? Also, how do I know which properties are valid which are not?

[zeerayne]

Bump this. I'm also interested in animation for tooltip show/hide