html - vertical - C'è un modo per aggiungere lentamente le lettere al testo da css?




transition css (4)

Voglio mostrare una parola (supponiamo Slow), c'è un modo per visualizzare prima 'slow', poi con l'animazione CSS aggiungere qualche O nel mezzo, trasformandolo da Slow a Sloooooow.

Sto usando l'ultima versione di Chrome, quindi tutte le funzionalità CSS3 / HTML5 sono benvenute.


Ecco una versione riveduta della risposta di @DarioSanchezMartinez che si adatta un po 'più alle tue specifiche.

/* 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;
  }
}
SL<span id="animate-1">o</span><span id="animate-2">o</span><span id="animate-3">o</span><span id="animate-4">o</span>W


Puoi aggiungere tutti gli elementi aggiuntivi come <span> e quindi animarli tutti in modo consecutivo usando :nth-child per selezionarli uno per uno:

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;
  vertical-align: bottom;
}
@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: 0s; }
h1 span:nth-child(2){ animation-delay: 1s; }
h1 span:nth-child(3){ animation-delay: 2s; }
h1 span:nth-child(4){ animation-delay: 3s; }
h1 span:nth-child(5){ animation-delay: 4s; }
h1 span:nth-child(6){ animation-delay: 5s; }
h1 span:nth-child(7){ animation-delay: 6s; }
h1 span:nth-child(8){ animation-delay: 7s; }
h1 span:nth-child(9){ 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>


Sì!

/* 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>


Solo per divertimento, ecco una soluzione in puro CSS (ovvero richiede solo un singolo elemento HTML), utilizzando la proprietà CSS del content :

.expanding-slow::before {
  content: "Slo";
  animation: expand-slow linear 3s both;
}
.expanding-slow::after { content: "w"; }
@keyframes expand-slow {
  0% { content: "Slo"; }
  20% { content: "Sloo"; }
  40% { content: "Slooo"; }
  60% { content: "Sloooo"; }
  80% { content: "Slooooo"; }
  100% { content: "Sloooooo"; }
}

.expanding-slow--smooth::before {
  display: inline-block;
  content: "Sloooooo";
  max-width: 3ch;
  overflow: hidden;
  vertical-align: text-top;
  animation: expand-slow--smooth linear 3s both;
}
.expanding-slow--smooth::after { content: "w"; }
@keyframes expand-slow--smooth {
  0% { max-width: 3ch; }
  100% { max-width: 8ch; }
}
Using <code>content</code>:
<p class="expanding-slow"></p>

Using <code>max-width</code>:
<p class="expanding-slow--smooth"></p>





css-animations