你可以只在css中尝试，但建议使用JavaScript，因为当页面完全动画然后关闭时，悬停时正常工作，我强制宽度开始和结束于10px，否则你不能悬停在它上面。

div.parent {
  display: block;
  width: 100%;
  height: 64px;
}
div.child {
  height: 64px;
  width: 10px;
  background: red;
  animation-name: htz; /* Default animation for non-hover state */
  animation-duration: 1s;
  animation-direction: normal;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
div.child:hover {
  animation-name: zth; /* Override animation for hover state */
}
@keyframes zth {
  from {
    width: 10px;
  }
  to {
    width: 100%;
  }
}
@keyframes htz {
  from {
    width: 100%;
  }
  to {
    width: 10px;
  }
}

个字符