CSS3 AnimCSS3 oferuje znacznik “@keyframes”, który potrafi określić animację danego elementu html.Oczywiście wcześniej by osiągnąć taki prosty efekt musieliby użyć jQuery, Flasha albo Silverlight-a.

W tym wpisie pokaże banalną animację wypełnienia napisu.

Oto style CSS 3, które definiują nie tylko wygląd elementów, ale także animację.

.word {
    color: hsl(77, 70%, 50%);
    font:400 60pt "Segoe UI", Arial, Helvetica, sans-serif;
text-align:center;
}

@-moz-keyframes loading {
    from { max-width: 0; }
}

@-webkit-keyframes loading {
    from { max-width: 0; }
}

@keyframes loading {
    from { max-width: 0; }
}

.word:before {
    content: attr(data-content);
    position: absolute;
    overflow: hidden;
    max-width: 4em;
    color: hsl(205, 100%, 50%);
    -moz-animation: loading 10s linear;
    -o-animation: loading 10s linear;
    -webkit-animation: loading 10s linear;
    animation: loading 10s linear;
}

Obecnie nie wszystkie przeglądarki wspierają oznaczenie “@keyframes” dlatego musiałem dodać specyficzne właściwości, które działają tylko dla określonych przeglądarek (-webkit-animation:)

vendors browsers

Klasa “word” nadaje określonemu napisowi jego bazowe właściwości.

Aby uzyskać efekt wypełnienia używam znacznika “:before”, który nad istniejący napisem będzie animował nowy napis, którego zawartość jest ustalona w tagu html “data-content”.

Animacja jest liniowa i trwa 10 sekund. Stan początkowy animacji (@keyframes loading) określa maksymalną długość jako zero i z czasem ta wartość będzie się zmieniać.

Użycie animacji wygląda następująco.

<span class=”word” data-content="Cezary">Cezary Walenciuk</span>

Jak widać, ponieważ w data-content napisałem tylko słowo “Cezary” napis tylko w tym słowie będzie się animował.

CSS napis