Как сделать анимацию линий под текстом?

Question

Вот макет

Вот html

<div class="title_wrapp">
    <h3>Intro interview Intro interview Intro interview Intro interview</h3>
</div>

Вот CSS

.title_wrapp h3 {
    display: inline;
    overflow: hidden;
    position: relative;
    font-family: "PF Regal Display Pro";
    font-weight: 500;
    font-size: 34px;
    line-height: 34px;
    color: #584A45;
    z-index: 3;
    background: -moz-linear-gradient(top,  rgba(243,225,216,0) 0%, rgba(243,225,216,0) 59%, rgba(243,225,216,1) 60%, rgba(243,225,216,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(243,225,216,0) 0%,rgba(243,225,216,0) 59%,rgba(243,225,216,1) 60%,rgba(243,225,216,1) 100%);
    background: linear-gradient(to bottom,  rgba(243,225,216,0) 0%,rgba(243,225,216,0) 59%,rgba(243,225,216,1) 60%,rgba(243,225,216,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f3e1d8', endColorstr='#f3e1d8',GradientType=0 );
}

Так же нужно учитывать что может быть перенос строки как тут

Нужно чтобы розовая линия при анимации выехала с лева на право и остановилась. Как такое сделать?

Answer 1

Такой вариант?

.title_wrapp {
  width: 250px;
}

.title_wrapp h3 {
  display: inline;
  background: 
    linear-gradient(to bottom,
      transparent 65%,
      red 65%) no-repeat left bottom / 0% auto;
  animation: LineMove 3s linear forwards;
}

@keyframes LineMove {
  100% {background-size: 100% auto;}
}

<div class="title_wrapp">
  <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque fermentum, libero a accumsan aliquet, nunc leo auctor nunc, sit amet euismod orci nibh eu ipsum.</h3>
</div>

БЛОГ НА HUSL

Как сделать анимацию линий под текстом?

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