Luminescente

Some days ago I decided to play with the animations using CSS3. Seemed a little weird at first, but is actually very easy.

No time for long (or short) explanations, please RTFM for that, but here is a little example: the devious <blink> tag. Old is new again, I guess…

For webkit only, replace those -webkits with -moz to see with a recent Firefox.

<style type="text/css">

.blink {
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-name: blink;
    -webkit-animation-duration: .5s;
    -webkit-animation-direction: alternate;
}

@-webkit-keyframes blink {
    0% { opacity: 1; }
    100% { opacity: .2; }
}

</style>

<p class="blink">Hello blinking world.</p>