Sugarcane

.header {\n position:fixed;\n top: 0;\n left: 0;\n margin: 0;\n width:100%;\n height:100%;\n background-color:transparent;\n transition: 1.5s;\n -webkit-transition: 1.5s;\n z-index: -10;\n}\n.transition-in > .header {\n background-color:white;\n z-index: 1000;\n}\n.transition-out {\n display:none;\n}

.transition-in .char:nth-child(12n) {\n top: 20em;\n}\n.transition-in .char:nth-child(12n+1) {\n top: 45em;\n}\n.transition-in .char:nth-child(12n+2) {\n top: 5em;\n}\n.transition-in .char:nth-child(12n+3) {\n top: 30em;\n}\n.transition-in .char:nth-child(12n+4) {\n top: 15em;\n}\n.transition-in .char:nth-child(12n+5) {\n top: 50em;\n}\n.transition-in .char:nth-child(12n+6) {\n top: 25em;\n}\n.transition-in .char:nth-child(12n+7) {\n top: 40em;\n}\n.transition-in .char:nth-child(12n+8) {\n top: 55em;\n}\n.transition-in .char:nth-child(12n+9) {\n top: 35em;\n}\n.transition-in .char:nth-child(12n+10) {\n top: 10em;\n}\n.transition-in .char:nth-child(12n+11) {\n top: 45em;\n}\n.char {\n transition: top 2s;\n -webkit-transition: top 2s;\n position:relative;\n top: 0em;\n}\n.transition-in {\n opacity:0;\n}\n.passage {\n transition: 1s;\n -webkit-transition: 1s;\n position:relative;\n}\n.transition-out {\n display:none;\n}

data:image/png;base64,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

.transition-in .char:nth-child(12n) {\n top: 2em;\n left: -1em;\n}\n.transition-in .char:nth-child(12n+1) {\n top: 4em;\n left: 2em;\n}\n.transition-in .char:nth-child(12n+2) {\n top: 5em;\n left: 1em;\n}\n.transition-in .char:nth-child(12n+3) {\n top: -3em;\n left: 5em;\n}\n.transition-in .char:nth-child(12n+4) {\n top: 5em;\n left: -2em;\n}\n.transition-in .char:nth-child(12n+5) {\n top: 5em;\n left: 0.5em;\n}\n.transition-in .char:nth-child(12n+6) {\n top: 0.5em;\n left: 2em;\n}\n.transition-in .char:nth-child(12n+7) {\n top: -1em;\n left: 5em;\n}\n.transition-in .char:nth-child(12n+8) {\n top: -5em;\n left: 5em;\n}\n.transition-in .char:nth-child(12n+9) {\n top: 3em;\n left: -1em;\n}\n.transition-in .char:nth-child(12n+10) {\n top: -1em;\n left: 4em;\n}\n.transition-in .char:nth-child(12n+11) {\n top: -5em;\n left: -5em;\n}\n.char {\n transition: 2s;\n -webkit-transition: 2s;\n position:relative;\n top: 0em;\n left: 0em;\n}\n.transition-in {\n opacity:0;\n}\n.passage {\n transition: 1s;\n -webkit-transition: 1s;\n position:relative;\n}\n.transition-out {\n display:none;\n}

<<Start >>

.transition-out .char:nth-child(12n) {\n top: 20em;\n}\n.transition-out .char:nth-child(12n+1) {\n top: 45em;\n}\n.transition-out .char:nth-child(12n+2) {\n top: 5em;\n}\n.transition-out .char:nth-child(12n+3) {\n top: 30em;\n}\n.transition-out .char:nth-child(12n+4) {\n top: 15em;\n}\n.transition-out .char:nth-child(12n+5) {\n top: 50em;\n}\n.transition-out .char:nth-child(12n+6) {\n top: 25em;\n}\n.transition-out .char:nth-child(12n+7) {\n top: 40em;\n}\n.transition-out .char:nth-child(12n+8) {\n top: 55em;\n}\n.transition-out .char:nth-child(12n+9) {\n top: 35em;\n}\n.transition-out .char:nth-child(12n+10) {\n top: 10em;\n}\n.transition-out .char:nth-child(12n+11) {\n top: 45em;\n}\n.char {\n transition: 1.5s ease-in;\n -webkit-transition: 1.5s ease-in;\n position:relative;\n top: 0em;\n}\n.transition-in {\n opacity:0;\n}\n.passage {\n transition: 1.5s;\n -webkit-transition: 1.5s;\n position:absolute;\n}\n.transition-out {\n opacity:0;\n}

.transition-in {\n opacity:0;\n transform: translate(0,-100rem);\n -webkit-transform: translate(0,-100rem);\n position:absolute;\n}\n.passage {\n transition: 1s;\n -webkit-transition: 1s;\n}\n.transition-out {\n opacity:0;\n transform: translate(0,100rem);\n -webkit-transform: translate(0,100rem);\n position:absolute;\n}

.transition-out { display:none; }

.transition-in {\n opacity:0;\n transform: scale(0.8,0.8);\n -webkit-transform: scale(0.8,0.8);\n position:absolute;\n}\n.passage {\n width: calc(100% - 12em); // Necessary to keep the zoom origin point consistent.\n width: -webkit-calc(100% - 12em);\n transition: 0.5s ease-out;\n -webkit-transition: 0.5s ease-out;\n}\n.transition-out {\n opacity:0;\n transform: scale(2,2);\n -webkit-transform: scale(2,2);\n position:absolute;\n}

<<Start >>

Transition example

<<Start >>

.transition-in .char {\n transform: scale(8,8);\n -webkit-transform: scale(8,8);\n}\n.passage .char:not(.space) {\n transition: 2s ease-out;\n -webkit-transition: 2s ease-out;\n display:inline-block;\n}\n.space {\n white-space: normal;\n}\n.transition-in {\n opacity:0;\n}\n.passage {\n transition: 1s;\n -webkit-transition: 1s;\n white-space: nowrap;\n}\n.transition-out {\n display:none;\n}

<<Start >>

.transition-in {\n opacity:0;\n position:absolute;\n}\n.passage:not(.transition-out) {\n transition: 0.8s steps(3);\n -webkit-transition: 0.8s steps(3);\n}\n.transition-out {\n opacity:0;\n position:absolute;\n}

.header {\n position:fixed;\n top: 0;\n left: 0;\n margin: 0;\n width:100%;\n height:100%;\n background-color:transparent;\n transition: 3s;\n -webkit-transition: 3s;\n z-index: -10;\n}\n.transition-in > .header {\n background-color:orangered;\n z-index: 1000;\n}\n.transition-out {\n display:none;\n}

<<Start >>

/* This requires letter-glimmer be included too */\n.char {\n transition-timing-function: step-end !important;\n -webkit-transition-timing-function: step-end !important;\n}

<<Start >>

.transition-in .char {\n color:transparent !important;\n text-shadow: #fff 0 0 1em;\n}\n.passage:not(.transition-out) .char {\n transition: 2s;\n -webkit-transition: 2s;\n}\n.transition-out {\n display:none;\n}

<<Start >>

.transition-in {\n opacity:0;\n position:absolute;\n}\n.passage {\n background-color: #000;\n transition: 1s ease-in;\n -webkit-transition: 1s ease-in;\n}\n.transition-out {\n position:absolute;\n z-index:3;\n transform: translate(0,-200%);\n -webkit-transform: translate(0,-200%);\n}

<<Start >>

<<if either(0,1)>>[img[logo]]\nTo help demonstrate the effects of these transitions, this image randomly appears and disappears each time you visit this passage.<<endif>>\n\nA passage with the tag "stylesheet" contains CSS code that <<print either("will","can")>> be used to style the story. If it also <<print either("has","possesses")>> the tag "transition", it can <<print either("replace","override","change")>> the default CSS transition. If it also has another tag, that stylesheet can be <<print either("bound","restricted","limited")>> to passages that only have that tag as well.\n\n<<print either("Select","Pick")>> a transition:\n* [[8-bit fade-in]]\n* [[Instant]]\n* [[Cut to black]]\n* [[Dissolve]]\n* [[Fast scroll up]]\n* [[Focus]]\n* [[Red flash]]\n* [[White flash]]\n* [[Zoom in]]\n* [[Garage door]]\n* [[Wipe]]\n* [[Letter-lift]]\n* [[Letter-fall]]\n* [[Letter-cluster]]\n* [[Letter-zoom]]\n* [[Letter-glimmer]]\n* [[Letter-blink]]\n

<<Start >>

.transition-in .char {\n opacity: 0;\n}\n.char:nth-child(12n) {\n transition: 2s;\n -webkit-transition: 2s;\n}\n.char:nth-child(12n+1) {\n transition: 3s;\n -webkit-transition: 3s;\n}\n.char:nth-child(12n+2) {\n transition: 1s;\n -webkit-transition: 1s;\n}\n.char:nth-child(12n+3) {\n transition: 0.5s;\n -webkit-transition: 0.5s;\n}\n.char:nth-child(12n+4) {\n transition: 1.5s;\n -webkit-transition: 1.5s;\n}\n.char:nth-child(12n+5) {\n transition: 3.25s;\n -webkit-transition: 3.25s;\n}\n.char:nth-child(12n+6) {\n transition: 2.5s;\n -webkit-transition: 2.5s;\n}\n.char:nth-child(12n+7) {\n transition: 0.25s;\n -webkit-transition: 0.25s;\n}\n.char:nth-child(12n+8) {\n transition: 2.75s;\n -webkit-transition: 2.75s;\n}\n.char:nth-child(12n+9) {\n transition: 1.25s;\n -webkit-transition: 1.25s;\n}\n.char:nth-child(12n+10) {\n transition: 1.75s;\n -webkit-transition: 1.75s;\n}\n.char:nth-child(12n+11) {\n transition: 0.75s;\n -webkit-transition: 0.75s;\n}\n.char {\n opacity: 1;\n position:relative;\n}\n.transition-out {\n display:none;\n}

<<Start >>

.transition-in {\n position:absolute;\n opacity:0;\n}\n.passage {\n transition: 1s;\n -webkit-transition: 1s;\n}\n.transition-out {\n position:absolute;\n opacity:0;\n}

<<Start >>

.header {\n position:fixed;\n top: 0;\n left: 0;\n margin: 0;\n width:100%;\n height:100%;\n background-color:transparent;\n transition: 1.5s step-end;\n -webkit-transition: 1.5s step-end;\n z-index: -10;\n}\n.transition-in > .header {\n background-color:#000;\n z-index: 1000;\n}\n.transition-out {\n display:none;\n}

Leon Arnott

.transition-in {\n clip: rect(0px, 1200px, 0px, 0px) !important;\n}\n.passage {\n clip: rect(0px, 1200px, 800px, 0px);\n position: absolute;\n transition: 1s linear;\n -webkit-transition: 1s linear;\n}\n.transition-out {\n clip: rect(800px, 1200px, 800px, 0px);\n}

<<Start >>