Animacje CSS

Tak sobie siedzę, popijam likierek i pomyślałem, że może dodam animacje w CSS. A czemu by nie.

Kod HTML:

<div class="anim-div">
Animowany div
</div>


Kod CSS:

@keyframes anim-1 {
from {background-color: red;}
to {background-color: pink;}
}


div.anim-div {
display: inline-block;
background-color: red;
animation-name: anim-1;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: reverse;
animation-fill-mode: backwards;
animation-timing-function: linear;
}


A z linkiem: Animowany link

No coś tego linka nie chce animować. A jak zrobię tak.

I to też nie działa. No dobra, a taki efekt.

Link 1.

No jakieś podkreślenie się udało zrobić, ale kod jest tak pogięty, że to chyba SI pisało normalnie. A ja se tylko wkleiłem z neta i namawiam do wklejania ode mnie. Można przez F12 podejrzeć źródło strony i poszukać w CSS-ach.

A to. Anim link. No i link już mi działa. Dodałem nową klasę, wtedy było na div-ach, a teraz uniwersalna klasa do wszystkiego.