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
Post a Comment