CODEWITHSUNDEEP
csscss-animations
Ethan Beech
Ethan Beech

Reputation: 23

Making Elements invisible prior to CSS animations

I recently started trying to learn CSS animations and I am trying to make a typewriter-like effect. Although the effect is working, I am wondering how I can make the animation start several seconds after the page loads, but still have the text appear invisible (width: 0). I tried several things including making the first animation twice as long, but denoting a width of zero until the 50% keyframe mark, however it made the animation very choppy and start part way through the text. I also tried making the opacity 0 until the first keyframe, but that also didn't seem to work. Any help would be greatly appreciated!

.type1{
    width: 30em;
    white-space:nowrap;
    overflow:hidden;


    -webkit-animation: type 3s steps(40, end);
    -webkit-animation-delay: 3s;
    animation: type 3s steps(40, end);
    animation-delay: 3s;
}



@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
}

.type2{
    width: 20em;
    white-space:nowrap;
    overflow:hidden;

    -webkit-animation: type 2s steps(40, end);
    -webkit-animation-delay: 4.8s;
    animation: type 2s steps(40, end);
    animation-delay: 4.8s
}

@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
}
<div class= "jumbotron jumbotron-fluid">
     <div id="mainpage" class= "container">
      <h1>Tim</h1>
      <p class="type1">I am the current CEO of Apple</p>
      <p class="type2">and I love movies</p>
      
     </div>
    </div>

Upvotes: 2

Views: 62

Answers (1)

Rushabh Sheth
Rushabh Sheth

Reputation: 177

document.onreadystatechange = function() {
  var state = document.readyState
  if (state == 'complete') {

    $(".type1").addClass("text-animation").removeClass("hide");
    $(".type2").addClass("text-animation").removeClass("hide");

  }
}
.type1 {
  width: 20em;
  white-space: nowrap;
  overflow: hidden;
}

.hide {
  display: none !important;
}

.text-animation {
  -webkit-animation: type 3s steps(40, end);
  -webkit-animation-delay: 0s;
  animation: type 3s steps(40, end);
  animation-delay: 0s
}

@keyframes type {
  from {
    width: 0
  }
}

@-webkit-keyframes type {
  from {
    width: 0
  }
}

.type2 {
  width: 20em;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes type {
  from {
    width: 0
  }
}

@-webkit-keyframes type {
  from {
    width: 0
  }
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div class="jumbotron jumbotron-fluid">
  <div id="mainpage" class="container">
    <h1>Tim</h1>
    <p class="type1 hide">I am the current CEO of Apple</p>
    <p class="type2 hide">and I love movies</p>

  </div>
</div>

You just need to call the animation later. I did it when the page is fully loaded with all script and css. You can also use setTimeout() function to set timer delay if needed.

Upvotes: 1

Related Questions