I'm trying to see if I can use steps() in css to creating a typing animation. I'm basing my code off of this:
http://codepen.io/rusjames/pen/KbuGt/However, I can't seem to get it working. Anyone have any ideas? I'm using sugarcube This is my current stylesheet code:
#ui-bar {
display: none;
}
.passage {
font-size:1.25em;
font-family: "Lucida Sans Typewriter", Consolas, Monaco, monospace;
margin: 2em auto 0 auto;
overflow: hidden;
animation: type 4s steps(60, end);
white-space: nowrap;
overflow: hidden;
}
.passage .content {
width:100%;
min-width:1280px;
max-width:1280px;
height:720px;
min-height: 720px;
border:
#ffffff double 0.5em;
border-radius: 1em;
padding: 1em;
white-space: nowrap;
overflow: hidden;
animation: type 4s steps(60, end);
}
@-webkit-keyframes .passage{
from { width: 0; }
}
@-webkit-keyframes .passage .content{
0%{width: 0;}
50%{width: 0;}
100%{ width: 100; }
}
Comments
For a fixed number of short lines (as in the example you linked), that's not so bad. For a large number of lines, not so much.
Any idea where I should look to try to do some sort of animated typing?