Блог

Главная - Вопросы по программированию - Анимация — Как выбрать, что произошло, когда анимация выполнена

Анимация — Как выбрать, что произошло, когда анимация выполнена

#html #css #animation

#HTML #css #Анимация

Вопрос:

Анимация — Как выбрать, что произошло, когда анимация завершена. Когда я наведу курсор на свой ввод, он отключит анимацию и вернется к началу, которое я хочу, когда это будет сделано, это замедлит начальную точку и не произойдет немедленно.

например: я навожу курсор на текст, и он поднимается, а когда я останавливаю наведение курсора, он меняется в то же время (опускается).

 .form {
  padding: 12px 25% 10px 25%;
  display: grid;
  grid-template-areas: "grid-1";
  grid-gap: 7px;
}

.box {
  position: relative;
  height: 50px;
}

.form input {
  height: 100%;
  width: 100%;
  outline: 0;
  padding-top: 20px;
  padding-left: 7px;
  box-shadow: 1px 1px 1px 1px rgb(240, 219, 219),
    1px 1px 1px 1px rgb(155, 35, 35);
  border: 1px solid rgb(236, 160, 160);
  border-radius: 10px;
  font-size: 16px;
  z-index: 1;
}

.form > .box {
  grid-area: grid-1;
}

.form > .box > label {
  position: absolute;
  left: 0;
  bottom: 5px;
  padding-left: 7px;
  pointer-events: none;
}

.form > .box > input:focus   label {
  color: aqua;
  font-size: 14px;
  transform: translateY(-20px);
  transition: all 2.3s ease;
}  
 <div class="form">

  <div class="box">
    <input type="text">
    <label>first name</label>
  </div>

</div>

Ответ №1:

Здесь ваш переход активен только тогда, когда метка сфокусирована, потому transition что указан только в состоянии метки. Вы хотите добавить еще один переход CSS, когда метка не сфокусирована:

 .form > .box > input   label {
  transition: all 2.3s ease;
}
  

 .form {
  padding: 12px 25% 10px 25%;
  display: grid;
  grid-template-areas: "grid-1";
  grid-gap: 7px;
}

.box {
  position: relative;
  height: 50px;
}

.form input {
  height: 100%;
  width: 100%;
  outline: 0;
  padding-top: 20px;
  padding-left: 7px;
  box-shadow: 1px 1px 1px 1px rgb(240, 219, 219),
    1px 1px 1px 1px rgb(155, 35, 35);
  border: 1px solid rgb(236, 160, 160);
  border-radius: 10px;
  font-size: 16px;
  z-index: 1;
}

.form > .box {
  grid-area: grid-1;
}

.form > .box > label {
  position: absolute;
  left: 0;
  bottom: 5px;
  padding-left: 7px;
  pointer-events: none;
}

.form > .box > input   label {
  transition: all 2.3s ease;
}

.form > .box > input:focus   label {
  color: aqua;
  font-size: 14px;
  transform: translateY(-20px);
  transition: all 2.3s ease;
}  
 <div class="form">

  <div class="box">
    <input type="text">
    <label>first name</label>
  </div>

</div>