how to solve steps skip the last frame while set animate for infinite?
I want to realize type letters effect use CSS 3 property "animation". But I found when I set animation infinite , steps(1, end) always skip the last key frame. I want to add the animation in which i will skip the last frame while set the animation for the infinite. Kindly help me to animate the text.
/*type keyframes*/ @keyframes type { from { left: 0%; } to { left: 100%; } } /*cursor flash keyframes*/ @keyframes flash { from { color: rgb(255,255,255); } 50% { color: rgb(102,102,102); } to { color: rgb(255,255,255); } } body { background: #666; } .text { display: inline-block; height: 30px; line-height: 30px; text-align: center; border-bottom: 1px solid #fff; left: 50%; top: 100px; cursor: text; color: #fff; font-weight: 700; position: relative; font-family: monospace; } /*mask layer*/ .text::before { content: "|"; font-weight: lighter; text-align: left; width: 300px; height: 30px; position: absolute; left: 0; top: 0; background-color: #666; animation: type 1s steps(12, end) infinite, flash 1s steps(1, end) infinite; }<div class="text">hello world!</div>I had try add animation-fill-mode: forwards, but it did’n work also. Is there exist an easy way to solve it?
You can add an extra step and increase the left value in the keyframes by a character.
@keyframes type { to { left: calc(100% + 1ch); } } @keyframes flash { from { color: rgb(255, 255, 255); } 50% { color: rgb(102, 102, 102); } to { color: rgb(255, 255, 255); } } body { background: grey; overflow: hidden; } .text { display: inline-block; height: 30px; line-height: 30px; text-align: center; border-bottom: 1px solid #fff; left: 50%; top: 100px; cursor: text; color: #fff; font-weight: 700; position: relative; font-family: monospace; } .text::before { content: "|"; font-weight: lighter; text-align: left; width: 300px; height: 30px; position: absolute; left: 0; top: 0; background-color: #666; animation: type 1s steps(13, end) infinite, flash 1s steps(13, end) infinite; }<div class="text">hello world!</div> 
