sugar cube blink text.

sudoradish

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

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

Thanks for that. It answers my question and more!

I am really grateful for the help.