sugar cube blink text.

sudoradish · September 2016

I have been looking through the docs and google to see if I can do this within sugar cube or if I need to do some code. Can I simply blink some text?

TheMadExile · September 2016

If you do not want/need to support very old browsers (e.g. IE9, Opera ≤12), then you may use a CSS3 keyframe animation. Here are two examples—use only one.

CSS for a blink that fades in/out: (goes in your Story Stylesheet)

.blink {
    -webkit-animation: blinker 1s linear infinite;
            animation: blinker 1s linear infinite;
}
@-webkit-keyframes blinker {
    50% { opacity: 0; }
}
@keyframes blinker {
    50% { opacity: 0; }
}

CSS for a blink that pops in/out: (goes in your Story Stylesheet)

.blink {
    -webkit-animation: blinker 1s step-end infinite;
            animation: blinker 1s step-end infinite;
}
@-webkit-keyframes blinker {
    50% { visibility: hidden; }
}
@keyframes blinker {
    50% { visibility: hidden; }
}

Usage: (for both)

@

/* Using HTML markup. */
<span class="blink">See some blinking text.</span>

sudoradish · September 2016

Thanks for that. It answers my question and more!

I am really grateful for the help.

Howdy, Stranger!

Categories

sugar cube blink text.

Comments