CSS动画在完成后不断重置[重复]

Question

我正在尝试使当 <input> 获得焦点时，输入栏的宽度会延伸到按钮之外。它可以工作，但由于某种原因它不会保持拉伸状态（它会恢复其初始宽度）。

我做错了什么？

这是一个小提琴：https://jsfiddle.net/v4bu0k8j/

CSS：

#main {
  display:flex;
  position:relative;
}
#txt {
  width:125px;
  position:absolute;
  z-index:2;
}
#btn {
  margin-left:140px;
  position:absolute;
  z-index:1;
}

@keyframes widen {
  0% {
    width:125px;
  }
  100% {
    width:300px;
  }
}


.openSearch {
  -webkit-transition: widen .5s ease-in;
    -moz-transition: widen .5s ease-in;
    -o-transition: widen .5s ease-in;
    animation: widen .5s ease-in;
}

Javascript

const search = document.getElementById("txt");

search.addEventListener("focus", event => {
    search.classList.add("openSearch");
});

Answer 1

尝试添加~animation-fill-mode: forwards;

.openSearch {
  -webkit-transition: widen .5s ease-in;
  -moz-transition: widen .5s ease-in;
  -o-transition: widen .5s ease-in;
  animation: widen .5s ease-in;

  /* Try adding this */
  animation-fill-mode: forwards;
}