Anyone successfully use Step() in Twine 2.0 Sugarcube CSS?

alanwdang@gmail.com

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; }
}

TheMadExile

That particular faux-teletype animation is probably never going to work the way you want it to.  For each and every line you wanted to be able to display, you'd have to wrap the line in a container and have a CSS ruleset specifically for it.

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.

alanwdang@gmail.com

I figured as much. So this method probably won't work then will it?

Any idea where I should look to try to do some sort of animated typing?