html - Stop Animation Between Loop CSS -


i have code , want stop animate between loops ex 5sec, googled , found rotate (no delay)

.line-1{      border-left: 2px solid rgba(255,255,255,.75);      white-space: nowrap;      overflow: hidden;  	direction:ltr;  }    /* animation */  .anim-typewriter{  	animation: typewriter 4s steps(44) 1s infinite normal both,  				blinktextcursor 500ms steps(44) infinite normal;  }  @keyframes typewriter{  	from{width: 0;}  	to{width: 24em;}  }  @keyframes blinktextcursor{  	from{border-left-color: rgba(255,255,255,.75);}  	to{border-left-color: transparent;}  }
<p class="line-1 anim-typewriter" style="margin-left:auto;margin-right:auto;">good news: won :)<a href="awards/"> award </a></p>

you can add step in keyframe animation same previous step:

.line-1 {    border-left: 2px solid rgba(255, 255, 255, .75);    white-space: nowrap;    overflow: hidden;    direction: ltr;  }      /* animation */    .anim-typewriter {            animation: typewriter 8s /* increase 8s have 4s pause */ steps(44) 1s infinite normal both, blinktextcursor 500ms steps(44) infinite normal;  }    @keyframes typewriter {    0% {      width: 0;    }    50% {      width: 24em;    }    100% {  /* 50% of animation pause */      width: 24em;    }  }    @keyframes blinktextcursor {    {      border-left-color: rgba(255, 255, 255, .75);    }    {      border-left-color: transparent;    }  }
<p class="line-1 anim-typewriter" style="margin-left:auto;margin-right:auto;">good news: won :)<a href="awards/"> award </a></p>


Comments

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -