Эффект пишущей машинки CSS3

Question

У меня есть код CSS3, который имеет эффект пишущей машинки.

Что я хочу сделать, это оживить линию <p></p>, затем стереть ее, а затем оживить следующий <p></p>. Я уже делал это с первой строкой. Но как я могу стереть первый, а затем перейти к следующей строке.

Код указан в настоящий момент.

.css-typing { 
 
    width: 10em; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    -webkit-animation: type 5s steps(50, end); 
 
    animation: type 5s steps(50, end); 
 
} 
 
@keyframes type { 
 
    from { 
 
    width: 0; 
 
    } 
 
} 
 
@-webkit-keyframes type { 
 
    from { 
 
    width: 0; 
 
    } 
 
}

<p class='css-typing'>To save their world</p> 
 
<p class='css-typing'>They must come to ours</p> 
 
<p class='css-typing'>Spongebob out of water</p>

Answer 1

вы можете попробовать, как это -

p{ 
 
    color: #000; 
 
    
 
    font-size: 20px; 
 
    margin: 10px 0 0 10px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    width: 30em; 
 
    animation: type 4s steps(60, end); 
 
} 
 

 
p:nth-child(2){ 
 
    animation: type2 4s steps(30, end); 
 
} 
 

 
p:nth-child(3){ 
 
    animation: type3 6s steps(60, end); 
 
} 
 

 

 
@keyframes type{ 
 
    from { width: 0; } 
 
} 
 

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

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

<p class='css-typing'>To save their world</p> 
 
<p class='css-typing'>They must come to ours</p> 
 
<p class='css-typing'>Spongebob out of water</p>

Answer 2

Основываясь на ваш вопрос, я полагаю, что вы не ищете для естественного пишущей машинкой эффекта, но больше о том, чтобы расширить то, что вы уже создали на 2-й, 3-й линии, а также скрыть первая строка, когда вторая анимация и так далее. Если это действительно так, прочитайте дальше.

Поскольку вам нужно анимировать несколько элементов, но не в одно и то же время, вам нужно добавить задержку. Задержка для каждого элемента должна быть рассчитана таким образом, чтобы все предыдущие элементы завершили свою анимацию к моменту начала анимации для текущего. Так, например, первый элемент не нуждается в задержке, а второй потребуется задержка 5 с, третья - задержка 10 с и так далее. Эти задержки могут применяться к элементам с помощью селекторов nth-child, как в приведенном ниже фрагменте.

Наконец, поскольку вы ищете, что предыдущие строки исчезают при анимации следующего элемента, значение по умолчанию/исходная ширина элемента должно быть 0 и должно быть анимированным до 10em.

.css-typing { 
 
    width: 0; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
@keyframes type { 
 
    to { 
 
    width: 10em; 
 
    } 
 
} 
 
@-webkit-keyframes type { 
 
    to { 
 
    width: 10em; 
 
    } 
 
} 
 

 
p{ 
 
    -webkit-animation: type 5s steps(50, end); 
 
    animation: type 5s steps(50, end); 
 
} 
 
p:nth-child(2){ 
 
    -webkit-animation-delay: 5s; 
 
    animation-delay: 5s; 
 
} 
 
p:nth-child(3){ 
 
    -webkit-animation-delay: 10s; 
 
    animation-delay: 10s; 
 
}

<p class='css-typing'>To save their world</p> 
 
<p class='css-typing'>They must come to ours</p> 
 
<p class='css-typing'>Spongebob out of water</p>

Answer 3

Я бы разделить вашу анимацию в 3, чтобы добавить задержки, а затем положить все <p> же место и добавить свойство "скрыть" к анимации:

.container {position:relative;} 
.css-typing { 
    width: 10em; 
    white-space: nowrap; 
    overflow: hidden; 
    opacity:0; 
    position:absolute; 
    top:0; 
    left:0; 
} 
.x1 {animation: type1 5s steps(50, end);} 
@keyframes type1 { 
    0% {width: 0; opacity:1} 
    99% {width: 10em; opacity:1} 
    100% {opacity:0;} 
} 
.x2 { 
    animation: type2 5s steps(50, end); 
    animation-delay:5s; 
} 
@keyframes type2 { 
    0% {width: 0; opacity:1} 
    99% {width: 10em; opacity:1} 
    100% {opacity:0;} 
} 
.x3 { 
    animation: type3 5s steps(50, end); 
    animation-delay:10s; 
} 
@keyframes type3 { 
    0% {width: 0; opacity:1} 
    99% {width: 10em; opacity:1} 
    100% {opacity:0;} 
} 

JSFIDDLE

Отредактировано для бесконечного bucle (как запрос от Khalil) вы должны добавить infinite количество взаимодействий и немного закрутить время анимации и секторы, чтобы тексты не перекрывались.

Как в этом FIDDLE