Animation CSS Multiline Typing

Asked

Viewed 78 times

0

Good afternoon,

Someone could help me with this question: I’m trying to put an animation of Typing text in the home, but with 2 lines. I’m not getting a break between the two lines, so when the first line ends, the second starts, and the two come out together and restart the process.

<!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;
  }
}

css animation

  • Cris only with CSS does not help you. Edit your question and include HTML as well

  • Thank you hugocsl, I already did. Can I get help for this? I’m breaking my head...

1 answer

0


If your code was a bit messy, I’d lose more trying to fix it than making an example from scratch. So I made this model to help you understand the concept. There may be people with other options to do the same animation, but I think this one might suit you

You want to "marry" the two animations right, so they need to have the same time, because with different times one will walk faster than the other!

inserir a descrição da imagem aqui

Bearing that in mind I did an animation of 3s to facilitate. This gives us an interval of 0% a 33% another of 33% a 66% and another of 66% a 100%, each interval represents 1s expert?

Then the "complete" animation of the first text happens in the first 0% a 33% (1s) of animation. After that he 33% a 100% (2s) stopped blinking.

Text 2 is stopped hidden from 0% a 33%, (1s) then it runs full from 33% to 66% (1s), and from 66% to 100% (1s) is stopped blinking. After that animation starts again.

See the code for the image above

.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>

  • 1

    I can’t thank you enough for your help. It helped me a lot, I’m still learning.

  • @Criscredie cool that helped you I’m happy! From a studied on animations with CSS etc will help you a lot in the future! If my reply has helped you in any way consider marking it as Accept, on this icon ✔ below the little arrows on the left side of my answer, so the site does not get open questions pending no answer accepted. And rest assured, if another answer appears that you believe to be better or but complete etc you can change your answer acceptance at any time ;)

  • Yes, it really helped. I’m studying animations in css, but I still have a lot to learn. I’m just finding the time really fast. There’s a way to slow down the transition?

  • @Criscredie Yes look here: animation: texto1 3s steps(7, end) infinite; where is 3s means the animation has 3 seconds. Ali vc can for as many seconds as you want and the animation will get slower. REMEMBER to put the same has in both animations!! Text1 and Text2 have to have the same Xs X seconds,

  • Yes, I increased, but doing so the first sentence, does not appear, only the first letter gets static.

  • @Criscredie look at this link, I just changed the timing for 8s. Here, animation: texto1 8s steps(7, end) and here tooanimation: texto2 8s steps(7, end) . See working https://codepen.io/hugocsl/pen/WLaQJR

  • 1

    thank you so much, I managed to solve it. You making it seems so simple...

  • Good afternoon @hugocsl, the animation was great, but now I had a problem that does not become responsive. I had to increase the width to 34ch, to appear the whole sentence, and the style does not recognize.

  • @Criscredie this kind of animation not sotuma be very responsive even not. I suggest you open up a new question and post up your code and explain the problem you’re having. Or you can search for jQuery plugins that make this kind of animation in a more dynamic way. Take a look here https://answall.com/questions/265186/criar-fun%C3%A7%C3%A3o-que-simule-digita%C3%A7%C3%A3o/ and here too, https://answall.com/questions/290086/efeito-escrita-dinamica-text/ may have something to help you. https://mattboldt.com/demos/typed-jsplugins/

Show 4 more comments

Browser other questions tagged css animation

You are not signed in. Login or sign up in order to post.