0

Boa tarde,

Alguém poderia me ajudar com esta dúvida: estou tentando colocar uma animação de typing text na home, mas com 2 linhas. Não estou conseguindo estipular um intervalo entre as duas linhas, para quando a primeira linha terminar, começar a segunda, e as duas saírem juntas e reiniciar o processo.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
         <meta name="description" content="">
        <meta name="keywords" content="">
        <meta charset="utf-8">
        <meta name="author" content="">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Favicons -->
        <link rel="shortcut icon" href="images/favicon.png">

        <!-- CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/style-responsive.css">
        <link rel="stylesheet" href="css/animate.min.css">
        <link rel="stylesheet" href="css/vertical-rhythm.min.css">
        <link rel="stylesheet" href="css/owl.carousel.css">
        <link rel="stylesheet" href="css/font.awesome.min.css">
        <link rel="stylesheet" href="css/owl.transitions.css">
        <link rel="stylesheet" href="css/simpletextrotator.css">
        <link rel="stylesheet" href="css/magnific-popup.css">
        
   </head>
    <body class="appear-animate">
    
     <!-- Page Loader -->        
        <div class="page-loader">
            <div class="loader">Carregando...</div>
        </div>
        <!-- End Page Loader -->
        
        <!-- Page Wrap -->
        <div class="page" id="top">
            
            <!-- Home Section -->
            <section class="home-section bg-dark" data-background="video/video.jpg" id="home">
                <div class="js-height-full container">
                    
                    <!-- Video BG Init -->
                    <!-- Please, replace three video files in folder "video" with your own ones -->
                    <div class="bg-video-wrapper" id="video-background-1">
                        <div class="bg-video-overlay bg-dark-alfa-50"></div>
                    </div>
                    
                    <!-- End Video BG Init -->
                    
                    <!-- Hero Content -->
             
                    <div class="home-content">
                        <div class="home-text">
                           <h1 class="hs-line-8 font-alt mb-30 mb-xs-0">
                                <span style="background-color: #00203C">&emsp;xxxxxxxx &emsp;</span>
                            </h1>
                        
                          <div class="css-typing align-center">
                          <h1>TEXTO 1,</h1>
                          <h1>TEXTO 2.</h1>
                          </div>
                    <!-- End Hero Content -->
                    
                    <!-- Scroll Down -->
                    <div class="local-scroll">
                        <a href="#about" class="scroll-down"><i class="fa fa-angle-down scroll-down-icon"></i></a>
                    </div>
                    <!-- End Scroll Down -->
                    
                </div>
            </section>
            <!-- End Home Section -->

.css-typing h1 {
  font-family: "Open Sans";
  font-size: 40px;
  white-space: nowrap;
  overflow: hidden;
  font-color: #fff;
}
.css-typing h1:nth-child(1) {
  width: 14em;
  -webkit-animation: type 4s steps(40, end);
  animation: type 4s steps(40, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.42,0,0.58,1);
  
}

.css-typing h1:nth-child(2) {
  width: 19.5em;
  opacity: 0;
  -webkit-animation: type2 4s steps(60, end);
  animation: type2 4s steps(60, end);
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.62,0,0.78,1);

}


@keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: tranparent;
  }
}

2
  • Cris só com CSS não da para te ajudar. Edite sua pergunta e inclua o HTML também
    – hugocsl
    10/01/2019 às 15:14
  • Obrigada hugocsl, já o fiz. Será que consigo ajuda pra isso? Estou quebrando a cabeça... 10/01/2019 às 15:30

1 Resposta 1

0

Cris o sue código estava meio bagunçado, eu ia perder mais tento tentando conserta-lo do que fazendo um exemplo do zero. Então fiz esse modelo para te ajudar a entender o conceito. Pode ter gente com outras opções para fazer a mesma animação, mas acho que essa pode te atender

Vc quer "casar" as duas animações correto, então elas precisam ter o mesmo tempo, pois com tempos diferentes uma vai andar mais rápido que a outra!

inserir a descrição da imagem aqui

Tendo isso em mente eu fiz uma animação de 3s para facilitar. Isso nos da um intervalo de 0% a 33% outro de 33% a 66% e outro de 66% a 100%, cada intervalo desses representa 1s entendido?

Então a animação "completa" do primeiro texto acontece nos primeiros 0% a 33% (1s) da animação. Depois disso ele fica de 33% a 100% (2s) parado piscando.

O texto 2 fica parado escondido de 0% a 33%, (1s) depois ele executa completo de 33% ate 66% (1s), e de 66% a 100% (1s) fica parado piscando. Depois disso a animação recomeça.

Veja o código referente a imagem acima

.texto1,
.texto2 {
    font-family: "Open Sans";
    font-size: 3rem;
    white-space: nowrap;
    overflow: hidden;
    color: #f00;
    display: inline-block;
    position: relative;
    width: 0;
    padding-right: 0;
    animation: texto1 3s steps(7, end) infinite;
}
.texto2 {
    animation: texto2 3s steps(7, end) infinite;
}

div::after {
    content: "";
    position: absolute;
    width: 0.1em;
    height: 1em;
    top: 0.2em;
    right: 0;
    background-color: #f00;
    opacity: 1;
    animation: blink 500ms infinite;
}

@keyframes blink {
    to {
        opacity: 0;
    }
}
@keyframes texto1 {
    33% {
        width: 6ch;
        padding-right: .2em;
    }
    100% {
        width: 6ch;
        padding-right: .2em;
    }
}
@keyframes texto2 {
    0% {
        width: 0ch;
        opacity: 0;
    }
    29% {
        width: 0ch;
        opacity: 0;
    }
    33% {
        width: 0ch;
        opacity: 1;
    }
    66% {
        width: 11ch;
        padding-right: .2em;
    }
    100% {
        width: 11ch;
        padding-right: .2em;
    }
}
<div class="texto1">Texto 1</div>
<br>
<div class="texto2">Texto Texto 2</div>

9
  • 1
    Não tenho como te agradecer a sua ajuda. Me ajudou muito, ainda estou no aprendizado. 10/01/2019 às 17:44
  • @CrisCredie legal que te ajudou fico feliz! De uma estudada sobre animações com CSS etc vai te ajudar muito no futuro! Se a minha resposta te ajudou de alguma forma considere marca-la como Aceita, nesse ícone abaixo das setinhas no lado esquerdo da minha resposta, assim o site não fica com perguntas abertas pendentes sem resposta aceita. E fique tranquilo, pq se aparecer outra resposta que vc acredite ser melhor ou mas completa etc vc pode mudar seu aceite da resposta a qualquer momento ;)
    – hugocsl
    10/01/2019 às 17:48
  • Sim, ajudou muito mesmo. estou estudando sim animações em css, mas ainda tenho muito o que aprender. Só estou achando o tempo muito rápido. Há como deixar mais lento a transição? 10/01/2019 às 18:14
  • @CrisCredie Sim olha aqui: animation: texto1 3s steps(7, end) infinite; onde está 3s significa que a animação tem 3 segundos. Ali vc pode por quantos segundos quiser e a animação vai ficar mai lenta. LEMBRE-SE de colocar o mesmo tem nas duas animações!! Texto1 e Texto2 tem que ter os mesmos Xs X segundos,
    – hugocsl
    10/01/2019 às 18:19
  • 1
    muito obrigada, consegui resolver isso. Você fazendo parece tão simples...rsssss 10/01/2019 às 18:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .