Блог

Главная - Вопросы по программированию - Эффект пишущей машинки. Печатать текст отдельно

Эффект пишущей машинки. Печатать текст отдельно

#html #css

#HTML #css

Вопрос:

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

 .index-title-main_1 h1 {
  font-family: monospace;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  border-right: .17em solid pink;
  animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
}
.index-title-main_2 h1 {
  font-family: monospace;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  border-right: .17em solid pink;
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  -ms-animation-delay: 2s;
  animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
}
.index-title-main_3 h1 {
  font-family: monospace;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  border-right: .17em solid pink;
  animation-delay: 4s;
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  -ms-animation-delay: 4s;
  animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
  -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
}

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}

@keyframes blinking-cursor {
  from,
  to {
    border-color: transparent
  }
  50% {
    border-color: pink;
  }
} 
 <div class="index-title-main_1"><h1>Text 1<br></h1></div>
<div class="index-title-main_2"><h1>Text 2<br></h1></div>
<div class="index-title-main_3"><h1>Text 3<br></h1></div>

Ответ №1:

Это связано с тем, что задержка перезаписывается при вводе свойства shorthand в разделе delay .

Вы можете попробовать это

 .index-title-main_1 h1 {
    font-family: monospace;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    border-right: .17em solid pink;
    -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
}

.index-title-main_2 h1 {
    font-family: monospace;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    border-right: .17em solid pink;
    -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
    -o-animation-delay: 2s;
    -ms-animation-delay: 2s;
}

.index-title-main_3 h1 {
    font-family: monospace;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    border-right: .17em solid pink;
    -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -o-animation-delay: 4s;
    -ms-animation-delay: 4s;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blinking-cursor {
    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: pink;
    }
} 
 <div class="index-title-main_1">
    <h1>Text 1<br></h1>
</div>
<div class="index-title-main_2">
    <h1>Text 2<br></h1>
</div>
<div class="index-title-main_3">
    <h1>Text 3<br></h1>
</div>

или это

 .index-title-main_1 h1 {
    font-family: monospace;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    border-right: .17em solid pink;
    -webkit-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -moz-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -o-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    -ms-animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
    animation: typing 2s steps(30, end), blinking-cursor .5s step-end infinite;
}

.index-title-main_2 h1 {
    font-family: monospace;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    border-right: .17em solid pink;
    -webkit-animation: typing 2s steps(30, end) 2s, blinking-cursor .5s step-end 2s infinite;
    -moz-animation: typing 2s steps(30, end) 2s, blinking-cursor .5s step-end 2s infinite;
    -o-animation: typing 2s steps(30, end) 2s, blinking-cursor .5s step-end 2s infinite;
    -ms-animation: typing 2s steps(30, end) 2s, blinking-cursor .5s step-end 2s infinite;
    animation: typing 2s steps(30, end) 2s, blinking-cursor .5s step-end 2s infinite;
}

.index-title-main_3 h1 {
    font-family: monospace;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    border-right: .17em solid pink;
    -webkit-animation: typing 2s steps(30, end) 4s, blinking-cursor .5s step-end 4s infinite;
    -moz-animation: typing 2s steps(30, end) 4s, blinking-cursor .5s step-end 4s infinite;
    -o-animation: typing 2s steps(30, end) 4s, blinking-cursor .5s step-end 4s infinite;
    -ms-animation: typing 2s steps(30, end) 4s, blinking-cursor .5s step-end 4s infinite;
    animation: typing 2s steps(30, end) 4s, blinking-cursor .5s step-end 4s infinite;
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blinking-cursor {
    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: pink;
    }
} 
 <div class="index-title-main_1">
    <h1>Text 1<br></h1>
</div>
<div class="index-title-main_2">
    <h1>Text 2<br></h1>
</div>
<div class="index-title-main_3">
    <h1>Text 3<br></h1>
</div