It looks like you're new here. If you want to get involved, click one of these buttons!
/* make keyframes that tell the start state and the end state of our object */ @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } .fade-in { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; } .fade-in.one { -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.7s; animation-delay: 0.7s; } .fade-in.two { -webkit-animation-delay: 10.2s; -moz-animation-delay:1.2s; animation-delay: 1.2s; } .fade-in.three { -webkit-animation-delay: 20.6s; -moz-animation-delay: 1.6s; animation-delay: 1.6s; } .fade-in.four { -webkit-animation-delay: 30.6s; -moz-animation-delay: 1.6s; animation-delay: 1.6s; } .dashdiv { background:grey; margin:5px; width:20px; height:20px; }
Comments
In SugarCube v1, you'd either have to use some JavaScript or CSS animations for this.
In SugarCube v2, you could use the <<timed>> macro for this, in addition to the options available to SugarCube v1. An example of using <<timed>>: And the CSS to override the default duration of 400ms:
Can't say what's wrong with that, since you haven't provided the code you were trying.
First. Giving only half the code you're using is unhelpful. You omitted the passage code where you're actually trying to use this.
Also. You must mean a class, not an ID, as the CSS you've shown uses classes. If not, then that's one of your problems right there.
Beyond that, your problem is probably the fact that your animation-delay properties have different values. For example: Note how the delay specified to the -webkit prefixed version isn't the same as the rest. Beyond that, none of your delays are multiples of three seconds—which you noted above is what you want.
Additionally, you don't need the -moz prefix. If you were going to include another, besides -webkit, then -o would be a better choice.
Try this CSS: Usage:
1. I am indeed using version 1.0.34 of Sugarcube. I incorrectly assumed since I downloaded Twine 2 that it would be Sugarcube 2 that was included.
2. I did in fact mean class, not ID. (Still learning css, so again I apologize for the incorrect naming
3. It struck me as strange that the css I provided and the code in the passage I omitted, worked fine in the Twine engine, but did not export correctly.
4. Your css and code you provided worked like a charm, and I am greatly appreciative for it. Thanks for the assistance.