How to make smooth exit of the text?

Question

I have ellipsis text. I want my text to exit smoothly on hover, but now it's just appears. Text should be ellipsis again if it's not hovered

.text {
  font-size: 13px;
  color: var(--tui-trend-text-color);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  width: 60px;
}

.text:hover {
  animation: testAnimation 1s;
}

@keyframes testAnimation {
  0% {
    width: 60px;
  }

  100% {
    width: auto;
  }
}

<div class="text">
  Long Text Long Text Long Text Long Text
</div>