css3 - facing animation issue while creating typing cursor effect in CSS steps() -


i want create typing cursor effect in css using steps() after playing quite while couldn't find why behaving abnormally, want cursor appear , disappear after specified time period. appears , fades half way. causing behavior?

please have @ fiddle.    https://jsfiddle.net/jl1f4rzc/ 

i preffer not use steps this, instead use percents in animation this:

.blink {  animation : blink 1s 0s infinite;  animation-direction: alternate; }  @keyframes blink {  0% {   border-right:2px solid #000;  }  70% {   border-right:2px solid #000;  }  75% {   border-right: 2px solid transparent;  }  100% {    border-right: 2px solid transparent;  } } 

fiddle updated


Comments

Popular posts from this blog

javascript - Thinglink image not visible until browser resize -

firebird - Error "invalid transaction handle (expecting explicit transaction start)" executing script from Delphi -

mongodb - How to keep track of users making Stripe Payments -