version.extensions["cyclinglinkMacro"] = {\n major: 3,\n minor: 3,\n revision: 0\n};\nmacros.cyclinglink = {\n handler: function (a, b, c) {\n var rl = "cyclingLink";\n\n function toggleText(w) {\n w.classList.remove("cyclingLinkInit");\n w.classList.toggle(rl + "Enabled");\n w.classList.toggle(rl + "Disabled");\n w.style.display = ((w.style.display == "none") ? "inline" : "none");\n }\n switch(c[c.length - 1]) {\n case "end":\n var end = true;\n c.pop();\n break;\n case "out":\n var out = true;\n c.pop();\n break;\n }\n var v = "";\n if(c.length && c[0][0] == "$") {\n v = c[0].slice(1);\n c.shift();\n }\n var h = state.history[0].variables;\n if(out && h[v] === "") {\n return;\n }\n var l = Wikifier.createInternalLink(a, null);\n l.className = "internalLink cyclingLink";\n l.setAttribute("data-cycle", 0);\n for(var i = 0; i < c.length; i++) {\n var on = (i == Math.max(c.indexOf(h[v]), 0));\n var d = insertElement(null, "span", null, "cyclingLinkInit cyclingLink" + ((on) ? "En" : "Dis") + "abled");\n if(on) {\n h[v] = c[i];\n l.setAttribute("data-cycle", i);\n }\n else {\n d.style.display = "none";\n }\n insertText(d, c[i]);\n if(on && end && i == c.length - 1) {\n l.parentNode.replaceChild(d, l);\n }\n else {\n l.appendChild(d);\n }\n }\n l.onclick = function () {\n var t = this.childNodes;\n var u = this.getAttribute("data-cycle") - 0;\n var m = t.length;\n toggleText(t[u]);\n u = (u + 1);\n if(!(out && u == m)) {\n u %= m;\n if(v) {\n h[v] = c[u];\n }\n }\n else {\n h[v] = "";\n } if((end || out) && u == m - (end ? 1 : 0)) {\n if(end) {\n var n = this.removeChild(t[u]);\n n.className = rl + "End";\n n.style.display = "inline";\n this.parentNode.replaceChild(n, this);\n }\n else {\n this.parentNode.removeChild(this);\n return;\n }\n return;\n }\n toggleText(t[u]);\n this.setAttribute("data-cycle", u);\n };\n }\n};

(function () {\n var bs = String.fromCharCode(92);\n Wikifier.formatters.unshift({\n name: "htmltag",\n match: "<"+bs+"w+(?:(?:"+bs+"s+"+bs+"w+(?:"+bs+"s*="+bs+"s*(?:"+'"'+".*?"+'"'+"|'.*?'|[^'"+'"'+">"+bs+"s]+))?)+"+bs+"s*|"+bs+"s*)"+bs+"/?>",\n tagname: "<("+bs+"w+)",\n voids: ["br", "hr", "area", "img", "input", "embed", "param", "source", "track"],\n handler: function (a) {\n var re, tn, e;\n re = new RegExp(this.tagname).exec(a.matchText);\n tn = re && re[1];\n if(tn) {\n e = document.createElement(a.output.tagName);\n e.innerHTML = a.matchText;\n e = e.firstChild;\n if(this.voids.indexOf(tn.toLowerCase()) == -1) {\n a.subWikify(e, "<" + bs + "/" + bs + "s*" + tn + bs + "s*>");\n }\n a.output.appendChild(e);\n }\n }\n });\n}());

Feel free to change the {{{background-color: black;}}} declaration to match your story's styles.\n\n{{{\n@-webkit-keyframes cyc-wipe {\n 0% { width: 0%; }\n 100% { width: 100%; }\n}\n@-webkit-keyframes cyc-wipe2 {\n 0% { top: 0em; opacity: 1; }\n 100% { opacity: 0; }\n}\n@-webkit-keyframes cyc-wipe3 {\n 0% { width: 100%; left: 0%; }\n 100% { width: 0%; left: 100%; }\n}\n@-webkit-keyframes cyc-wipe4 {\n 100% { top: 0em; opacity: 1; }\n 0% { opacity: 0; }\n}\n@keyframes cyc-wipe {\n 0% { width: 0%; }\n 100% { width: 100%; }\n}\n@keyframes cyc-wipe2 {\n 0% { top: 0em; opacity: 1; }\n 100% { opacity: 0; }\n}\n@keyframes cyc-wipe3 {\n 0% { width: 100%; left: 0%; }\n 100% { width: 0%; left: 100%; }\n}\n@keyframes cyc-wipe4 {\n 100% { top: 0em; opacity: 1; }\n 0% { opacity: 0; }\n}\n.cyclingLink {\n overflow: hidden;\n display: inline-block;\n position: relative;\n height: 2em;\n vertical-align: middle;\n white-space: pre;\n}\n.cyclingLink * {\n display: inline-block !important;\n left: 0;\n}\n.cyclingLink ::before {\n width: 0%;\n height: 100%;\n content: "";\n background-color: black; \n position: absolute;\n top: 0; left: 0;\n}\n.cyclingLinkEnabled::before {\n animation: cyc-wipe3 0.4s 0.4s ease-out; -webkit-animation: cyc-wipe3 0.4s 0.4s ease-out;\n}\n.cyclingLinkEnabled {\n position: relative;\n animation: cyc-wipe4 0.4s step-end; -webkit-animation: cyc-wipe4 0.4s step-end;\n}\n.cyclingLinkDisabled::before {\n animation: cyc-wipe 0.4s ease-in; -webkit-animation: cyc-wipe 0.4s ease-in;\n}\n.cyclingLinkDisabled {\n position: absolute;\n top: -8em;\n animation: cyc-wipe2 0.4s step-end; -webkit-animation: cyc-wipe2 0.4s step-end;\n}\n.cyclingLinkInit, .cyclingLinkInit::before {\n animation-iteration-count: 0 !important;\n -webkit-animation-iteration-count: 0 !important;\n}\n}}}\n<<return>>

{{{@keyframes cyc-box-flash {\n 0% { background-color: white; color: white; }\n 100% {}\n}\n@-webkit-keyframes cyc-box-flash {\n 0% { background-color: white; color: white; }\n 100% {}\n}\n.cyclingLinkEnabled {\n animation: cyc-box-flash 0.8s; -webkit-animation: cyc-box-flash 0.8s;\n}\n.cyclingLinkInit, .cyclingLinkInit::before {\n animation-iteration-count: 0 !important;\n -webkit-animation-iteration-count: 0 !important;\n}\n}}}\n<<return>>

.passage { font-size: 1.5em; }\n\n/* Vertical dial */\n@keyframes cyc-vert-dial-out {\n 0% { top: 0em; }\n 100% { top: 2em; }\n}\n@keyframes cyc-vert-dial-in {\n 0% { top: -2em; }\n 100% { top: 0em; }\n}\n@-webkit-keyframes cyc-vert-dial-out {\n 0% { top: 0em; }\n 100% { top: 2em; }\n}\n@-webkit-keyframes cyc-vert-dial-in {\n 0% { top: -2em; }\n 100% { top: 0em; }\n}\n.vert-dial .cyclingLink {\n overflow: hidden;\n display: inline-block;\n position: relative;\n height: 2em;\n vertical-align: middle;\n white-space: pre;\n}\n.vert-dial .cyclingLinkDisabled,\n.vert-dial .cyclingLinkEnabled {\n display: inline-block !important;\n height: 1em;\n top: 0em;\n left: 0em;\n position: absolute;\n}\n.vert-dial .cyclingLinkDisabled {\n top: -8em;\n animation: cyc-vert-dial-out 1s; -webkit-animation: cyc-vert-dial-out 1s;\n position: absolute;\n}\n.vert-dial .cyclingLinkEnabled {\n top: 0em; \n animation: cyc-vert-dial-in 0.8s; -webkit-animation: cyc-vert-dial-in 0.8s;\n position: relative;\n vertical-align: top;\n}\n\n\n/* Dissolve */\n@keyframes cyc-dissolve {\n 0% { opacity: 1; }\n 100% { opacity: 0; }\n}\n@-webkit-keyframes cyc-dissolve {\n 0% { opacity: 1; }\n 100% { opacity: 0; }\n}\n.dissolve .cyclingLink {\n position: relative;\n overflow: hidden;\n white-space: pre;\n}\n.dissolve .cyclingLink * {\n display: inline-block !important;\n left: 0;\n transition: opacity 1s;\n}\n.dissolve .cyclingLinkEnabled {\n opacity: 1;\n animation: cyc-dissolve 0.8s ease-in reverse; -webkit-animation: cyc-dissolve 0.8s ease-in reverse;\n position: relative;\n}\n.dissolve .cyclingLinkDisabled {\n opacity: 0;\n animation: cyc-dissolve 0.8s ease-out; -webkit-animation: cyc-dissolve 0.8s ease-out;\n position: absolute;\n}\n\n/* Focus */\n@keyframes cyc-focus {\n 0% { text-shadow: 0em 0em 1em white; color: transparent; }\n 100% { text-shadow: 0em 0em 0em white; }\n}\n@-webkit-keyframes cyc-focus {\n 0% { text-shadow: 0em 0em 1em white; color: transparent; }\n 100% { text-shadow: 0em 0em 0em white; }\n}\n.focus .cyclingLinkEnabled {\n color: inherit;\n opacity: 1;\n animation: cyc-focus 0.8s; -webkit-animation: cyc-focus 0.8s;\n position: relative;\n}\n\n/* Box Flash */\n@keyframes cyc-box-flash {\n 0% { background-color: white; color: white; }\n 100% {}\n}\n@-webkit-keyframes cyc-box-flash {\n 0% { background-color: white; color: white; }\n 100% {}\n}\n.flash .cyclingLinkEnabled {\n animation: cyc-box-flash 0.8s; -webkit-animation: cyc-box-flash 0.8s;\n}\n\n/* Shudder */\n@keyframes cyc-shudder-in {\n 0%, 100% { transform: translateX(0em); }\n 5%, 25%, 45% { transform: translateX(-1em); }\n 15%, 35%, 55% { transform: translateX(1em); }\n 65% { transform: translateX(-0.6em); }\n 75% { transform: translateX(0.6em); }\n 85% { transform: translateX(-0.2em); }\n 95% { transform: translateX(0.2em); }\n}\n@-webkit-keyframes cyc-shudder-in {\n 0%, 100% { -webkit-transform: translateX(0em); }\n 5%, 25%, 45% { -webkit-transform: translateX(-1em); }\n 15%, 35%, 55% { -webkit-transform: translateX(1em); }\n 65% { -webkit-transform: translateX(-0.6em); }\n 75% { -webkit-transform: translateX(0.6em); }\n 85% { -webkit-transform: translateX(-0.2em); }\n 95% { -webkit-transform: translateX(0.2em); }\n}\n.shudder .cyclingLinkEnabled {\n display: inline-block !important;\n animation: cyc-shudder-in 0.4s; -webkit-animation: cyc-shudder-in 0.4s;\n}\n\n/* Left Wipe */\n@-webkit-keyframes cyc-wipe {\n 0% { width: 0%; }\n 100% { width: 100%; }\n}\n@-webkit-keyframes cyc-wipe2 {\n 0% { top: 0em; opacity: 1; }\n 100% { opacity: 0; }\n}\n@-webkit-keyframes cyc-wipe3 {\n 0% { width: 100%; left: 0%; }\n 100% { width: 0%; left: 100%; }\n}\n@-webkit-keyframes cyc-wipe4 {\n 100% { top: 0em; opacity: 1; }\n 0% { opacity: 0; }\n}\n@keyframes cyc-wipe {\n 0% { width: 0%; }\n 100% { width: 100%; }\n}\n@keyframes cyc-wipe2 {\n 0% { top: 0em; opacity: 1; }\n 100% { opacity: 0; }\n}\n@keyframes cyc-wipe3 {\n 0% { width: 100%; left: 0%; }\n 100% { width: 0%; left: 100%; }\n}\n@keyframes cyc-wipe4 {\n 100% { top: 0em; opacity: 1; }\n 0% { opacity: 0; }\n}\n.leftwipe .cyclingLink {\n overflow: hidden;\n display: inline-block;\n position: relative;\n height: 2em;\n vertical-align: middle;\n white-space: pre;\n}\n.leftwipe .cyclingLink * {\n display: inline-block !important;\n left: 0;\n}\n.leftwipe .cyclingLink ::before {\n width: 0%;\n height: 100%;\n content: "";\n background-color: black; \n position: absolute;\n top: 0; left: 0;\n}\n.leftwipe .cyclingLinkEnabled::before {\n animation: cyc-wipe3 0.4s 0.4s ease-out; -webkit-animation: cyc-wipe3 0.4s 0.4s ease-out;\n}\n.leftwipe .cyclingLinkEnabled {\n position: relative;\n animation: cyc-wipe4 0.4s step-end; -webkit-animation: cyc-wipe4 0.4s step-end;\n}\n.leftwipe .cyclingLinkDisabled::before {\n animation: cyc-wipe 0.4s ease-in; -webkit-animation: cyc-wipe 0.4s ease-in;\n}\n.leftwipe .cyclingLinkDisabled {\n position: absolute;\n top: -8em;\n animation: cyc-wipe2 0.4s step-end; -webkit-animation: cyc-wipe2 0.4s step-end;\n}\n\n.cyclingLinkInit, .cyclingLinkInit::before {\n animation-iteration-count: 0 !important;\n -webkit-animation-iteration-count: 0 !important;\n}\n

{{{\n@keyframes cyc-focus {\n 0% { text-shadow: 0em 0em 1em white; color: transparent; }\n 100% { text-shadow: 0em 0em 0em white; }\n}\n@-webkit-keyframes cyc-focus {\n 0% { text-shadow: 0em 0em 1em white; color: transparent; }\n 100% { text-shadow: 0em 0em 0em white; }\n}\n.cyclingLinkEnabled {\n color: inherit;\n opacity: 1;\n animation: cyc-focus 0.8s; -webkit-animation: cyc-focus 0.8s;\n position: relative;\n}\n.cyclingLinkInit, .cyclingLinkInit::before {\n animation-iteration-count: 0 !important;\n -webkit-animation-iteration-count: 0 !important;\n}\n}}}\n<<return>>

{{{\n@keyframes cyc-vert-dial-out {\n 0% { top: 0em; }\n 100% { top: 2em; }\n}\n@keyframes cyc-vert-dial-in {\n 0% { top: -2em; }\n 100% { top: 0em; }\n}\n@-webkit-keyframes cyc-vert-dial-out {\n 0% { top: 0em; }\n 100% { top: 2em; }\n}\n@-webkit-keyframes cyc-vert-dial-in {\n 0% { top: -2em; }\n 100% { top: 0em; }\n}\n.cyclingLink {\n overflow: hidden;\n display: inline-block;\n position: relative;\n height: 2em;\n vertical-align: middle;\n white-space: pre;\n}\n.cyclingLinkDisabled,\n.cyclingLinkEnabled {\n display: inline-block !important;\n height: 1em;\n top: 0em;\n left: 0em;\n position: absolute;\n}\n.cyclingLinkDisabled {\n top: -8em;\n animation: cyc-vert-dial-out 1s; -webkit-animation: cyc-vert-dial-out 1s;\n position: absolute;\n}\n.cyclingLinkEnabled {\n top: 0em; \n animation: cyc-vert-dial-in 0.8s; -webkit-animation: cyc-vert-dial-in 0.8s;\n position: relative;\n vertical-align: top;\n}\n.cyclingLinkInit, .cyclingLinkInit::before {\n animation-iteration-count: 0 !important;\n -webkit-animation-iteration-count: 0 !important;\n}\n}}}\n<<return>>\n

{{{\n@keyframes cyc-shudder-in {\n 0%, 100% { transform: translateX(0em); }\n 5%, 25%, 45% { transform: translateX(-1em); }\n 15%, 35%, 55% { transform: translateX(1em); }\n 65% { transform: translateX(-0.6em); }\n 75% { transform: translateX(0.6em); }\n 85% { transform: translateX(-0.2em); }\n 95% { transform: translateX(0.2em); }\n}\n@-webkit-keyframes cyc-shudder-in {\n 0%, 100% { -webkit-transform: translateX(0em); }\n 5%, 25%, 45% { -webkit-transform: translateX(-1em); }\n 15%, 35%, 55% { -webkit-transform: translateX(1em); }\n 65% { -webkit-transform: translateX(-0.6em); }\n 75% { -webkit-transform: translateX(0.6em); }\n 85% { -webkit-transform: translateX(-0.2em); }\n 95% { -webkit-transform: translateX(0.2em); }\n}\n.cyclingLinkEnabled {\n display: inline-block !important;\n animation: cyc-shudder-in 0.4s; -webkit-animation: cyc-shudder-in 0.4s;\n}\n.cyclingLinkInit, .cyclingLinkInit::before {\n animation-iteration-count: 0 !important;\n -webkit-animation-iteration-count: 0 !important;\n}\n}}}\n<<return>>

These should be used with {{{<<cyclinglink>>}}} 3.3.0 (released 9/8/13) or higher. Otherwise, the animations may fire when the passage loads.\n\n''Vertical Dial''\n\n<span class="vert-dial">You see <<cyclinglink "a plate of cheese" "several large stones" "a wineglass full of engine oil" "some candlesticks" "forks">> on the table.</span>\n[[CSS code|Vertical Dial]]\n\n''Dissolve''\n\n<span class="dissolve">You see <<cyclinglink "a plate of cheese" "several large stones" "a wineglass full of engine oil" "some candlesticks" "forks">> on the table.</span>\n[[CSS code|Dissolve]]\n\n''Focus''\n\n<span class="focus">You see <<cyclinglink "a plate of cheese" "several large stones" "a wineglass full of engine oil" "some candlesticks" "forks">> on the table.</span>\n[[CSS code|Focus]]\n\n''Box Flash''\n\n<span class="flash">You see <<cyclinglink "a plate of cheese" "several large stones" "a wineglass full of engine oil" "some candlesticks" "forks">> on the table.</span>\n[[CSS code|Box Flash]]\n\n''Shudder''\n\n<span class="shudder">You see <<cyclinglink "a plate of cheese" "several large stones" "a wineglass full of engine oil" "some candlesticks" "forks">> on the table.</span>\n[[CSS code|Shudder]]\n\n''Left Wipe''\n\n<span class="leftwipe">You see <<cyclinglink "a plate of cheese" "several large stones" "a wineglass full of engine oil" "some candlesticks" "forks">> on the table.</span>\n[[CSS code|Left Wipe]]\n\n[[Back to Glorious Trainwrecks|http://www.glorioustrainwrecks.com/node/5020]]

Cyclinglink CSS effects

{{{\n@keyframes cyc-dissolve {\n 0% { opacity: 1; }\n 100% { opacity: 0; }\n}\n@-webkit-keyframes cyc-dissolve {\n 0% { opacity: 1; }\n 100% { opacity: 0; }\n}\n.cyclingLink {\n position: relative;\n overflow: hidden;\n white-space: pre;\n}\n.cyclingLink * {\n display: inline-block !important;\n left: 0;\n transition: opacity 1s;\n}\n.cyclingLinkEnabled {\n opacity: 1;\n animation: cyc-dissolve 0.8s ease-in reverse; -webkit-animation: cyc-dissolve 0.8s ease-in reverse;\n position: relative;\n}\n.cyclingLinkDisabled {\n opacity: 0;\n animation: cyc-dissolve 0.8s ease-out; -webkit-animation: cyc-dissolve 0.8s ease-out;\n position: absolute;\n}\n.cyclingLinkInit, .cyclingLinkInit::before {\n animation-iteration-count: 0 !important;\n -webkit-animation-iteration-count: 0 !important;\n}\n}}}\n<<return>>