Как сделать CSS анимацию, чтобы сделать наоборот после завершения?

Question

Код ниже является частью моего кода:

.myBox:hover::after {
   animation-name: underline;
   animation-duration: 350ms;
   animation-fill-mode: forwards;
}

@keyframes underline {
   from { width: 0; }
   to { width: 100%; }
}

Это работает нормально, но я хочу сделать это наоборот, когда анимация завершена, я имею в виду, когда она закончилась, тогда width должно быть снова 0, фактически для этой части я хочу сделать это, когда мой элемент не находится. Какая недвижимость может мне помочь?

Answer 1

Вы можете указать несколько значений для анимации, а не from и to, используя процент:

@keyframes underline {
    0%, 100% { width: 0; }
    50% { width: 100%; }
}

Более подробную информацию можно найти здесь .

Answer 2

.myBox:hover::after {
   animation-name: underline infinite;
   animation-duration: 350ms;
   animation-fill-mode: forwards;
}

@keyframes underline {
   from { width: 0; }
   to { width: 100%; }
}

Вы бесконечны для этого

Answer 3

Вам нужно использовать альтернативный и запустить 2 итерации анимации:

.box {
   height:200px;
   background:red;
   animation: underline 500ms alternate 2 forwards;
}

@keyframes underline {
   from { width: 0; }
   to { width: 100%; }
}

<div class="box">

</div>

Или рассмотрите возможность использования transition , если вы хотите, чтобы эффект при наведении:

.box {
  height: 200px;
  background: red;
  width: 0;
  transition: 500ms;
}

body:hover .box {
  width: 100%;
}

<div class="box">

</div>