cycle() é uma nova funcionalidade do CSS3 que permite que determinados estilos “circulem” entre uma lista de valores, em vez de apenas herdar um valor de uma propriedade qualquer. Se tivermos por exemplo a lista abaixo:

<ul>
    <li>Expert texpert choking smokers</li>
    <li>Don't you think the joker laughs at you?</li>
    <li>See how they smile,</li>
    <li>Like pigs in a sty,</li>
    <li>See how they snied. I'm crying.</li>
</ul>

E aplicando cycle() para mudar as cores:

li {
    color: cycle(black, red, blue);
}

O resultado será:

Detalhe: cycle() trabalha com qualquer tipo de valor CSS. Então podemos “circular” entre cores (aliases ou hexadecimais), medidas (pixels, ems, inches), estilos de fonte, etc. Claro que não podemos misturar vários tipos em uma mesma chamada de função, pois os valores que estarão dentro de cycle() devem ser aceitos pela propriedade a qual ela está sendo atribuída.

Se adicionarmos mais propriedades ao nosso exemplo:

li {
    color: cycle(black, red, blue);
    background-color: cycle(transparent, white);
    font-size: cycle(15px, 1.3em);
}

O resultado agora será:

Particularmente achei isso bem útil. Quem é desenvolvedor front-end sabe que esse tipo de coisa é muito corriqueira, e sempre temos que resolver definindo várias classes para cada caso e usando JavaScript ou até mesmo recursos server-side para imprimir as classes apenas nos lugares corretos.

No exemplo acima por exemplo, tive que definir 7 classes (3 para os valores de color, 2 para os valores de background-color e mais 2 para os valores de font-size) para poder ilustrar a aplicação de cycle(), pois nenhum navegador ainda dá suporte a esta funcionalidade – nem mesmo no Webkit.

Nem mesmo no caniuse.com há nada falando sobre cycle() ainda, mas há um Working Draft no W3C onde cycle() está definida. Acho que não demora muito para os navegadores começarem a implementar esta funcionalidade, pois ela faz parte do escopo CSS3, e o W3C quer muito fechar logo esse escopo de uma vez por todas.