Анимация зачеркивания слова при наведении

Question

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

Линия зачеркивания появляется слева направо и исчезает тоже слева направо.

@keyframes strike {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

.strike {
  position: relative;
}

.strike:hover:after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
  animation-name: strike;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: fill;
  animation-direction: normal;
}

<div>
  The text in the span <span class="strike">is what I want to strike out</span>.
</div>

Есть ли способ достичь этого только с помощью CSS?

_{Свободный перевод вопроса Strike in and out animation on hover от участника @sonia maklouf.}

Answer 1

Вы можете использовать transforms и transform-origin в анимации ключевых кадров, чтобы сделать
анимацию появления линии зачеркивания слева направо и исчезновение линии тоже слева направо.

Задача состоит в том, чтобы масштабировать псевдоэлемент по оси X от 0 до 1 с началом преобразования слева и затем обратно до 0 с началом преобразования справа (аналогично этому эффекту наведения см. Последний пример ответа).

А вот пример с вашей разметкой:

@keyframes strike{
  0%     { transform-origin:  0% 50%;transform:scaleX(0); }
  50%    { transform-origin:  0% 50%;transform:scaleX(1);  }
  50.01% { transform-origin:100% 50%;transform:scaleX(1);  }
  100%   { transform-origin:100% 50%;transform:scaleX(0);  }
}
.strike {
  position: relative;
}
.strike:hover:after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: red;
  animation: strike .75s ease-in-out forwards;
}

<div>
    The text in the span <span class="strike">is what I want to strike out</span>.
</div>

_{Свободный перевод ответа Strike in and out animation on hover от участника @web-tiki.}

Answer 2

Вот пример с использованием transition, где он применяется при наведении курсора влево / вправо.

.strike {
  position: relative;
}
.strike::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  right: 100%;
  height: 1px;
  background: red;
}
.strike:hover::after {
  right: 0;
  left: 100%;
  transition: right .5s .0s, left .5s .5s;  
}

<div>
  The text in the span <span class="strike">is what I want to strike out</span>.
</div>

_{Свободный перевод ответа Strike in and out animation on hover от участника @LGSon.}

БЛОГ НА HUSL

Анимация зачеркивания слова при наведении

Ответы (2 шт):