display:none; だと、transitionが効かない時の解決

問題

ツールチップを作る際、hover時に
ふわっと表示されるようにしたいが、
今回都合上displayプロパティを使用することになった。

.tooltip {
 display:none;/*いつもはopacity:0;と書いていた*/
 transform: translateY(5px);
 transition: 0.3s;
}
.tooltip:hover {
 display:block;/*いつもはopacity:1;と書いていた*/
 transform: translateY(0px);
}

すると、transitionが効かない。

解決

@keyframes tooltipShow {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
.tooltip {
  display: none;
}
.tooltip:hover {
  animation: tooltipShow 0.3s linear 0s;
  display: block;
}