Is there a way to slowly add letters to text by css?

up vote
6
down vote

favorite

I want to display a word (suppose Slow), is there a way to first display 'slow' then by CSS animation add few O's in the middle,
making it from Slow to Sloooooow.

I am using latest chrome so any CSS3/HTML5 features are welcome.

edited 1 hour ago

Gerard

10.1k41334

asked 2 hours ago

amitava mozumder

634

Not in CSS alone. You could do it by adding the remaining O's in  tag and then using span:nth-child(1) to customise their animation (just hide their overflow and collapse their width, then undo that once you want to show them).
â€“Â somethinghere
2 hours ago

I`m not sure but are you looking for this codepen.io/geoffgraham/pen/jrWwWM type of animation ?
â€“Â HTML CSS Hupp Technologies
2 hours ago

add a commentÂ |Â

up vote
6
down vote

favorite

I want to display a word (suppose Slow), is there a way to first display 'slow' then by CSS animation add few O's in the middle,
making it from Slow to Sloooooow.

I am using latest chrome so any CSS3/HTML5 features are welcome.

edited 1 hour ago

Gerard

10.1k41334

asked 2 hours ago

amitava mozumder

634

Not in CSS alone. You could do it by adding the remaining O's in  tag and then using span:nth-child(1) to customise their animation (just hide their overflow and collapse their width, then undo that once you want to show them).
â€“Â somethinghere
2 hours ago

I`m not sure but are you looking for this codepen.io/geoffgraham/pen/jrWwWM type of animation ?
â€“Â HTML CSS Hupp Technologies
2 hours ago

add a commentÂ |Â

up vote
6
down vote

favorite

I want to display a word (suppose Slow), is there a way to first display 'slow' then by CSS animation add few O's in the middle,
making it from Slow to Sloooooow.

I am using latest chrome so any CSS3/HTML5 features are welcome.

edited 1 hour ago

Gerard

10.1k41334

asked 2 hours ago

amitava mozumder

634

I want to display a word (suppose Slow), is there a way to first display 'slow' then by CSS animation add few O's in the middle,
making it from Slow to Sloooooow.

I am using latest chrome so any CSS3/HTML5 features are welcome.

html css css3 css-transitions css-animations

edited 1 hour ago

Gerard

10.1k41334

asked 2 hours ago

amitava mozumder

634

edited 1 hour ago

Gerard

10.1k41334

asked 2 hours ago

amitava mozumder

634

edited 1 hour ago

Gerard

10.1k41334

edited 1 hour ago

Gerard

10.1k41334

edited 1 hour ago

Gerard

10.1k41334

asked 2 hours ago

amitava mozumder

634

asked 2 hours ago

amitava mozumder

634

asked 2 hours ago

amitava mozumder

634

Not in CSS alone. You could do it by adding the remaining O's in  tag and then using span:nth-child(1) to customise their animation (just hide their overflow and collapse their width, then undo that once you want to show them).
â€“Â somethinghere
2 hours ago

I`m not sure but are you looking for this codepen.io/geoffgraham/pen/jrWwWM type of animation ?
â€“Â HTML CSS Hupp Technologies
2 hours ago

add a commentÂ |Â

Not in CSS alone. You could do it by adding the remaining O's in  tag and then using span:nth-child(1) to customise their animation (just hide their overflow and collapse their width, then undo that once you want to show them).
â€“Â somethinghere
2 hours ago

I`m not sure but are you looking for this codepen.io/geoffgraham/pen/jrWwWM type of animation ?
â€“Â HTML CSS Hupp Technologies
2 hours ago

Not in CSS alone. You could do it by adding the remaining O's in  tag and then using span:nth-child(1) to customise their animation (just hide their overflow and collapse their width, then undo that once you want to show them).
â€“Â somethinghere
2 hours ago

I`m not sure but are you looking for this codepen.io/geoffgraham/pen/jrWwWM type of animation ?
â€“Â HTML CSS Hupp Technologies
2 hours ago

add a commentÂ |Â

3 Answers
3

active

oldest

votes

up vote
10
down vote

accepted

You can consider animating the maximum width of a span like below.

.slow 
 display: inline-block;
 vertical-align: bottom;
 max-width: 0.5rem;
 overflow: hidden;
 animation: slow 2s ease forwards;


@keyframes slow 
 from 
 max-width: 0.5rem;
 
 to 
 max-width: 3rem;

<span>Sl</span><span class="slow">oooooo</span><span>w</span>

answered 2 hours ago

Gerard

10.1k41334

Am I the only one seeing just half an o once the animation is done? Safari 12/ MacOS Mojave... - Jup it works fine on Chrome but for some weird reason not on safari....
â€“Â somethinghere
2 hours ago

@Gerard cool & simple! :)
â€“Â ReSedano
2 hours ago

thanks a lot :)
â€“Â amitava mozumder
1 hour ago

add a commentÂ |Â

up vote
0
down vote

Yes!

/* Taken from http://animista.net/play/entrances/fade-in */


#animate-1 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 


#animate-2 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 1s;


#animate-3 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 2s;


#animate-4 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 3s;

@-webkit-keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;
 

@keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;

<h1 id="animate-1">S</h1>
<h1 id="animate-2">L</h1>
<h1 id="animate-3">O</h1>
<h1 id="animate-4">W</h1>

answered 2 hours ago

Dario Sanchez Martinez

347

this just prints the letter one by one. not what I'm looking for
â€“Â amitava mozumder
1 hour ago

add a commentÂ |Â

up vote
0
down vote

You could add all the additional os as  elements and then animate them all consecutively using :nth-child to select them one by one:

html, body 
 height: 100%;

body 
 display: flex;

h1 
 font-size: 10vw;
 margin: auto;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

h1 span 
 max-width: 0;
 overflow: hidden;
 display: inline-block;

@keyframes in 
 from max-width: 0; opacity: 0; 
 25% max-width: 1em; opacity: 0; 
 to max-width: 1em; opacity: 1; 

h1 span 
 animation: in 1s;
 animation-fill-mode: forwards;

h1 span:nth-child(1) animation-delay: 1s; 
h1 span:nth-child(2) animation-delay: 2s; 
h1 span:nth-child(3) animation-delay: 3s; 
h1 span:nth-child(4) animation-delay: 4s; 
h1 span:nth-child(5) animation-delay: 5s; 
h1 span:nth-child(6) animation-delay: 6s; 
h1 span:nth-child(7) animation-delay: 7s; 
h1 span:nth-child(8) animation-delay: 8s;

<h1>Slo<span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span>w</h1>

edited 1 hour ago

answered 2 hours ago

somethinghere

9,93511731

add a commentÂ |Â

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52943148%2fis-there-a-way-to-slowly-add-letters-to-text-by-css%23new-answer', 'question_page');

);

Post as a guest

Name

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
10
down vote

accepted

You can consider animating the maximum width of a span like below.

.slow 
 display: inline-block;
 vertical-align: bottom;
 max-width: 0.5rem;
 overflow: hidden;
 animation: slow 2s ease forwards;


@keyframes slow 
 from 
 max-width: 0.5rem;
 
 to 
 max-width: 3rem;

<span>Sl</span><span class="slow">oooooo</span><span>w</span>

answered 2 hours ago

Gerard

10.1k41334

Am I the only one seeing just half an o once the animation is done? Safari 12/ MacOS Mojave... - Jup it works fine on Chrome but for some weird reason not on safari....
â€“Â somethinghere
2 hours ago

@Gerard cool & simple! :)
â€“Â ReSedano
2 hours ago

thanks a lot :)
â€“Â amitava mozumder
1 hour ago

add a commentÂ |Â

up vote
10
down vote

accepted

You can consider animating the maximum width of a span like below.

.slow 
 display: inline-block;
 vertical-align: bottom;
 max-width: 0.5rem;
 overflow: hidden;
 animation: slow 2s ease forwards;


@keyframes slow 
 from 
 max-width: 0.5rem;
 
 to 
 max-width: 3rem;

<span>Sl</span><span class="slow">oooooo</span><span>w</span>

answered 2 hours ago

Gerard

10.1k41334

Am I the only one seeing just half an o once the animation is done? Safari 12/ MacOS Mojave... - Jup it works fine on Chrome but for some weird reason not on safari....
â€“Â somethinghere
2 hours ago

@Gerard cool & simple! :)
â€“Â ReSedano
2 hours ago

thanks a lot :)
â€“Â amitava mozumder
1 hour ago

add a commentÂ |Â

up vote
10
down vote

accepted

You can consider animating the maximum width of a span like below.

.slow 
 display: inline-block;
 vertical-align: bottom;
 max-width: 0.5rem;
 overflow: hidden;
 animation: slow 2s ease forwards;


@keyframes slow 
 from 
 max-width: 0.5rem;
 
 to 
 max-width: 3rem;

<span>Sl</span><span class="slow">oooooo</span><span>w</span>

answered 2 hours ago

Gerard

10.1k41334

You can consider animating the maximum width of a span like below.

.slow 
 display: inline-block;
 vertical-align: bottom;
 max-width: 0.5rem;
 overflow: hidden;
 animation: slow 2s ease forwards;


@keyframes slow 
 from 
 max-width: 0.5rem;
 
 to 
 max-width: 3rem;

<span>Sl</span><span class="slow">oooooo</span><span>w</span>

.slow 
 display: inline-block;
 vertical-align: bottom;
 max-width: 0.5rem;
 overflow: hidden;
 animation: slow 2s ease forwards;


@keyframes slow 
 from 
 max-width: 0.5rem;
 
 to 
 max-width: 3rem;

<span>Sl</span><span class="slow">oooooo</span><span>w</span>

.slow 
 display: inline-block;
 vertical-align: bottom;
 max-width: 0.5rem;
 overflow: hidden;
 animation: slow 2s ease forwards;


@keyframes slow 
 from 
 max-width: 0.5rem;
 
 to 
 max-width: 3rem;

<span>Sl</span><span class="slow">oooooo</span><span>w</span>

answered 2 hours ago

Gerard

10.1k41334

answered 2 hours ago

Gerard

10.1k41334

answered 2 hours ago

Gerard

10.1k41334

answered 2 hours ago

Gerard

10.1k41334

Am I the only one seeing just half an o once the animation is done? Safari 12/ MacOS Mojave... - Jup it works fine on Chrome but for some weird reason not on safari....
â€“Â somethinghere
2 hours ago

@Gerard cool & simple! :)
â€“Â ReSedano
2 hours ago

thanks a lot :)
â€“Â amitava mozumder
1 hour ago

add a commentÂ |Â

Am I the only one seeing just half an o once the animation is done? Safari 12/ MacOS Mojave... - Jup it works fine on Chrome but for some weird reason not on safari....
â€“Â somethinghere
2 hours ago

@Gerard cool & simple! :)
â€“Â ReSedano
2 hours ago

thanks a lot :)
â€“Â amitava mozumder
1 hour ago

Am I the only one seeing just half an o once the animation is done? Safari 12/ MacOS Mojave... - Jup it works fine on Chrome but for some weird reason not on safari....
â€“Â somethinghere
2 hours ago

@Gerard cool & simple! :)
â€“Â ReSedano
2 hours ago

thanks a lot :)
â€“Â amitava mozumder
1 hour ago

add a commentÂ |Â

up vote
0
down vote

Yes!

/* Taken from http://animista.net/play/entrances/fade-in */


#animate-1 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 


#animate-2 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 1s;


#animate-3 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 2s;


#animate-4 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 3s;

@-webkit-keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;
 

@keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;

<h1 id="animate-1">S</h1>
<h1 id="animate-2">L</h1>
<h1 id="animate-3">O</h1>
<h1 id="animate-4">W</h1>

answered 2 hours ago

Dario Sanchez Martinez

347

this just prints the letter one by one. not what I'm looking for
â€“Â amitava mozumder
1 hour ago

add a commentÂ |Â

up vote
0
down vote

Yes!

/* Taken from http://animista.net/play/entrances/fade-in */


#animate-1 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 


#animate-2 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 1s;


#animate-3 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 2s;


#animate-4 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 3s;

@-webkit-keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;
 

@keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;

<h1 id="animate-1">S</h1>
<h1 id="animate-2">L</h1>
<h1 id="animate-3">O</h1>
<h1 id="animate-4">W</h1>

answered 2 hours ago

Dario Sanchez Martinez

347

this just prints the letter one by one. not what I'm looking for
â€“Â amitava mozumder
1 hour ago

add a commentÂ |Â

up vote
0
down vote

Yes!

/* Taken from http://animista.net/play/entrances/fade-in */


#animate-1 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 


#animate-2 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 1s;


#animate-3 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 2s;


#animate-4 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 3s;

@-webkit-keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;
 

@keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;

<h1 id="animate-1">S</h1>
<h1 id="animate-2">L</h1>
<h1 id="animate-3">O</h1>
<h1 id="animate-4">W</h1>

answered 2 hours ago

Dario Sanchez Martinez

347

Yes!

/* Taken from http://animista.net/play/entrances/fade-in */


#animate-1 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 


#animate-2 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 1s;


#animate-3 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 2s;


#animate-4 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 3s;

@-webkit-keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;
 

@keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;

<h1 id="animate-1">S</h1>
<h1 id="animate-2">L</h1>
<h1 id="animate-3">O</h1>
<h1 id="animate-4">W</h1>

/* Taken from http://animista.net/play/entrances/fade-in */


#animate-1 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 


#animate-2 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 1s;


#animate-3 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 2s;


#animate-4 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 3s;

@-webkit-keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;
 

@keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;

<h1 id="animate-1">S</h1>
<h1 id="animate-2">L</h1>
<h1 id="animate-3">O</h1>
<h1 id="animate-4">W</h1>

/* Taken from http://animista.net/play/entrances/fade-in */


#animate-1 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 


#animate-2 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 1s;


#animate-3 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 2s;


#animate-4 
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	 animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
 animation-delay: 3s;

@-webkit-keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;
 

@keyframes fade-in 
 0% 
 opacity: 0;
 
 100% 
 opacity: 1;

<h1 id="animate-1">S</h1>
<h1 id="animate-2">L</h1>
<h1 id="animate-3">O</h1>
<h1 id="animate-4">W</h1>

answered 2 hours ago

Dario Sanchez Martinez

347

answered 2 hours ago

Dario Sanchez Martinez

347

answered 2 hours ago

Dario Sanchez Martinez

347

answered 2 hours ago

Dario Sanchez Martinez

347

this just prints the letter one by one. not what I'm looking for
â€“Â amitava mozumder
1 hour ago

add a commentÂ |Â

this just prints the letter one by one. not what I'm looking for
â€“Â amitava mozumder
1 hour ago

this just prints the letter one by one. not what I'm looking for
â€“Â amitava mozumder
1 hour ago

add a commentÂ |Â

up vote
0
down vote

You could add all the additional os as  elements and then animate them all consecutively using :nth-child to select them one by one:

html, body 
 height: 100%;

body 
 display: flex;

h1 
 font-size: 10vw;
 margin: auto;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

h1 span 
 max-width: 0;
 overflow: hidden;
 display: inline-block;

@keyframes in 
 from max-width: 0; opacity: 0; 
 25% max-width: 1em; opacity: 0; 
 to max-width: 1em; opacity: 1; 

h1 span 
 animation: in 1s;
 animation-fill-mode: forwards;

h1 span:nth-child(1) animation-delay: 1s; 
h1 span:nth-child(2) animation-delay: 2s; 
h1 span:nth-child(3) animation-delay: 3s; 
h1 span:nth-child(4) animation-delay: 4s; 
h1 span:nth-child(5) animation-delay: 5s; 
h1 span:nth-child(6) animation-delay: 6s; 
h1 span:nth-child(7) animation-delay: 7s; 
h1 span:nth-child(8) animation-delay: 8s;

<h1>Slo<span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span>w</h1>

edited 1 hour ago

answered 2 hours ago

somethinghere

9,93511731

add a commentÂ |Â

up vote
0
down vote

You could add all the additional os as  elements and then animate them all consecutively using :nth-child to select them one by one:

html, body 
 height: 100%;

body 
 display: flex;

h1 
 font-size: 10vw;
 margin: auto;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

h1 span 
 max-width: 0;
 overflow: hidden;
 display: inline-block;

@keyframes in 
 from max-width: 0; opacity: 0; 
 25% max-width: 1em; opacity: 0; 
 to max-width: 1em; opacity: 1; 

h1 span 
 animation: in 1s;
 animation-fill-mode: forwards;

h1 span:nth-child(1) animation-delay: 1s; 
h1 span:nth-child(2) animation-delay: 2s; 
h1 span:nth-child(3) animation-delay: 3s; 
h1 span:nth-child(4) animation-delay: 4s; 
h1 span:nth-child(5) animation-delay: 5s; 
h1 span:nth-child(6) animation-delay: 6s; 
h1 span:nth-child(7) animation-delay: 7s; 
h1 span:nth-child(8) animation-delay: 8s;

<h1>Slo<span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span>w</h1>

edited 1 hour ago

answered 2 hours ago

somethinghere

9,93511731

add a commentÂ |Â

up vote
0
down vote

You could add all the additional os as  elements and then animate them all consecutively using :nth-child to select them one by one:

html, body 
 height: 100%;

body 
 display: flex;

h1 
 font-size: 10vw;
 margin: auto;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

h1 span 
 max-width: 0;
 overflow: hidden;
 display: inline-block;

@keyframes in 
 from max-width: 0; opacity: 0; 
 25% max-width: 1em; opacity: 0; 
 to max-width: 1em; opacity: 1; 

h1 span 
 animation: in 1s;
 animation-fill-mode: forwards;

h1 span:nth-child(1) animation-delay: 1s; 
h1 span:nth-child(2) animation-delay: 2s; 
h1 span:nth-child(3) animation-delay: 3s; 
h1 span:nth-child(4) animation-delay: 4s; 
h1 span:nth-child(5) animation-delay: 5s; 
h1 span:nth-child(6) animation-delay: 6s; 
h1 span:nth-child(7) animation-delay: 7s; 
h1 span:nth-child(8) animation-delay: 8s;

<h1>Slo<span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span>w</h1>

edited 1 hour ago

answered 2 hours ago

somethinghere

9,93511731

You could add all the additional os as  elements and then animate them all consecutively using :nth-child to select them one by one:

html, body 
 height: 100%;

body 
 display: flex;

h1 
 font-size: 10vw;
 margin: auto;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

h1 span 
 max-width: 0;
 overflow: hidden;
 display: inline-block;

@keyframes in 
 from max-width: 0; opacity: 0; 
 25% max-width: 1em; opacity: 0; 
 to max-width: 1em; opacity: 1; 

h1 span 
 animation: in 1s;
 animation-fill-mode: forwards;

h1 span:nth-child(1) animation-delay: 1s; 
h1 span:nth-child(2) animation-delay: 2s; 
h1 span:nth-child(3) animation-delay: 3s; 
h1 span:nth-child(4) animation-delay: 4s; 
h1 span:nth-child(5) animation-delay: 5s; 
h1 span:nth-child(6) animation-delay: 6s; 
h1 span:nth-child(7) animation-delay: 7s; 
h1 span:nth-child(8) animation-delay: 8s;

<h1>Slo<span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span>w</h1>

html, body 
 height: 100%;

body 
 display: flex;

h1 
 font-size: 10vw;
 margin: auto;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

h1 span 
 max-width: 0;
 overflow: hidden;
 display: inline-block;

@keyframes in 
 from max-width: 0; opacity: 0; 
 25% max-width: 1em; opacity: 0; 
 to max-width: 1em; opacity: 1; 

h1 span 
 animation: in 1s;
 animation-fill-mode: forwards;

h1 span:nth-child(1) animation-delay: 1s; 
h1 span:nth-child(2) animation-delay: 2s; 
h1 span:nth-child(3) animation-delay: 3s; 
h1 span:nth-child(4) animation-delay: 4s; 
h1 span:nth-child(5) animation-delay: 5s; 
h1 span:nth-child(6) animation-delay: 6s; 
h1 span:nth-child(7) animation-delay: 7s; 
h1 span:nth-child(8) animation-delay: 8s;

<h1>Slo<span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span>w</h1>

html, body 
 height: 100%;

body 
 display: flex;

h1 
 font-size: 10vw;
 margin: auto;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

h1 span 
 max-width: 0;
 overflow: hidden;
 display: inline-block;

@keyframes in 
 from max-width: 0; opacity: 0; 
 25% max-width: 1em; opacity: 0; 
 to max-width: 1em; opacity: 1; 

h1 span 
 animation: in 1s;
 animation-fill-mode: forwards;

h1 span:nth-child(1) animation-delay: 1s; 
h1 span:nth-child(2) animation-delay: 2s; 
h1 span:nth-child(3) animation-delay: 3s; 
h1 span:nth-child(4) animation-delay: 4s; 
h1 span:nth-child(5) animation-delay: 5s; 
h1 span:nth-child(6) animation-delay: 6s; 
h1 span:nth-child(7) animation-delay: 7s; 
h1 span:nth-child(8) animation-delay: 8s;

<h1>Slo<span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span>w</h1>

edited 1 hour ago

answered 2 hours ago

somethinghere

9,93511731

edited 1 hour ago

answered 2 hours ago

somethinghere

9,93511731

answered 2 hours ago

somethinghere

9,93511731

answered 2 hours ago

somethinghere

9,93511731

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Search This Blog

Iyfjky