CSS animation keeps resetting after complete

Question

I'm trying to make it such that when an <input> is focused, the input bar width stretches past a button. It works, but for some reason it won't stay stretched (it resumes its initial width).

What am I doing wrong?

Heres a fiddle: 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");
});

score 1 · Accepted Answer · answered Mar 01 '21 at 20:34

Try adding ~ 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;
}

CSS animation keeps resetting after complete

1 Answers1