Modificare animazione testo

[Vincent.Zeno]

facci sapere come

[Utonto Tonto]

facci sapere come

In realtà era più semplice di quel che sembrava solo che lo snippet originale è fatto un pò male secondo me e quindi ho impiegato un pò a capirlo.

L'HTML e il CSS modificato per il mio sito:

<header>
        <div class="h1a">
            <span>I</span><span>t</span><span>a</span><span>l</span><span>i</span><span>a</span><span>&nbsp;</span><span>&amp;</span><span>&nbsp;</span><span>d</span><span>&nbsp;</span><span>&#39;</span><span>I</span><span>n</span><span>t</span><span>o</span><span>r</span><span>n</span><span>i</span>
        </div>
        <div class="h1b">
            <span>U</span><span>m</span><span>b</span><span>r</span><span>i</span><span>a</span>
        </div>
    </header>

header {
    position: relative;
    height: 400px;
    background-image: url(../images/header.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-shadow: 2px 2px 5px gray;
}

    /*-- Start header animation --*/
    
.h1a, .h1b {
    position: relative;
    text-align: center;
    backface-visibility: hidden;
}

.h1a span {
    display: inline-block;
    position: relative;
    top: 50px;
    font-size: 200px;
    font-weight: bold;
    color: gold;
    text-shadow: 1px 1px 10px gray;
    animation: smoky 5s 3s both;
}

.h1b span {
    display: inline-block;
    position: relative;
    bottom: 150px;
    font-size: 200px;
    font-weight: bold;
    color: gold;
    text-shadow: 1px 1px 10px gray;
    animation: smoky 5s 3s both reverse;
}

.h1a span:nth-child(even), .h1b span:nth-child(even) {
    animation-name: smoky-mirror;
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px gray;
  }
  to {
    transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
    text-shadow: 0 0 20px gray;
    opacity: 0;
  }
}

@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px gray;
  }
  to {
    transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
    text-shadow: 0 0 20px gray;
    opacity: 0;
  }
}

.h1a span:nth-of-type(1) {
  animation-delay: 3.1s;
}

.h1a span:nth-of-type(2) {
  animation-delay: 3.2s;
}

.h1a span:nth-of-type(3) {
  animation-delay: 3.3s;
}

.h1a span:nth-of-type(4) {
  animation-delay: 3.4s;
}

.h1a span:nth-of-type(5) {
  animation-delay: 3.5s;
}

.h1a span:nth-of-type(6) {
  animation-delay: 3.6s;
}

.h1a span:nth-of-type(7) {
  animation-delay: 3.7s;
}

.h1a span:nth-of-type(8) {
  animation-delay: 3.8s;
}

.h1a span:nth-of-type(9) {
  animation-delay: 3.9s;
}

.h1a span:nth-of-type(10) {
  animation-delay: 4s;
}

.h1a span:nth-of-type(11) {
  animation-delay: 4.1s;
}

.h1a span:nth-of-type(12) {
  animation-delay: 4.2s;
}

.h1a span:nth-of-type(13) {
  animation-delay: 4.3s;
}

.h1a span:nth-of-type(14) {
  animation-delay: 4.4s;
}

.h1a span:nth-of-type(15) {
  animation-delay: 4.5s;
}

.h1a span:nth-of-type(16) {
  animation-delay: 4.6s;
}

.h1a span:nth-of-type(17) {
  animation-delay: 4.7s;
}

.h1a span:nth-of-type(18) {
  animation-delay: 4.8s;
}

.h1a span:nth-of-type(19) {
  animation-delay: 4.9s;
}

.h1b span:nth-of-type(1) {
  animation-delay: 3.1s;
}

.h1b span:nth-of-type(2) {
  animation-delay: 3.2s;
}

.h1b span:nth-of-type(3) {
  animation-delay: 3.3s;
}

.h1b span:nth-of-type(4) {
  animation-delay: 3.4s;
}

.h1b span:nth-of-type(5) {
  animation-delay: 3.5s;
}

.h1b span:nth-of-type(6) {
  animation-delay: 3.6s;
}

    /*-- End header animation --*/