share/goodie/css_animations/demo_0/style.css
.tile--css_animations__demo1 {
    background-color: #111111;
    height: 100%;
}
.tile--css_animations__demo1 div {
    padding: 40px;
    font-size: 36px;
    font-family: monospace;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
    color: red;
}
.tile--css_animations__demo1 div p {
    margin: 0;
}
.tile--css_animations__demo1 #status:hover {
    text-shadow: 0 0 200px #ffffff, 0 0 80px #008000, 0 0 6px #0000ff;
}
.tile--css_animations__demo1 #message {
    font-size: 20px;
}
.tile--css_animations__demo1 #message:hover {
    text-shadow: 0 0 100px red, 0 0 40px FireBrick, 0 0 8px DarkRed;
}
.tile--css_animations__demo1 #status {
    color: #fff;
    text-shadow: 0 0 80px #ffffff, 0 0 30px #008000, 0 0 6px #0000ff;
}
.tile--css_animations__demo1 #status span {
    animation: upper 11s linear infinite;
}
.tile--css_animations__demo1 #message span:nth-of-type(2) {
    animation: lower 10s linear infinite;
}
.tile--css_animations__demo1 #message span:nth-of-type(1) {
    text-shadow: none;
    opacity: .4;
}
@keyframes upper {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
        opacity: .99;
        text-shadow: 0 0 80px #ffffff, 0 0 30px #008000, 0 0 6px #0000ff;
    }
    20%,
    21.999%,
    63%,
    63.999%,
    65%,
    69.999% {
        opacity: 0.4;
        text-shadow: none;
    }
}
@keyframes lower {
    0%, 12%, 18.999%, 23%, 31.999%, 37%, 44.999%, 46%, 49.999%, 51%, 58.999%, 61%, 68.999%, 71%, 85.999%, 96%, 100% {
        opacity: 0.99;
        text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
    }
    19%,
    22.99%,
    32%,
    36.999%,
    45%,
    45.999%,
    50%,
    50.99%,
    59%,
    60.999%,
    69%,
    70.999%,
    86%,
    95.999% {
        opacity: 0.4;
        text-shadow: none;
    }
}