Over animeerbare en niet-animeerbare CSS-eigenschappen

Hiernaast zie je een rechthoek met scherpe hoeken. De twee onderhoeken veranderen steeds, van een scherpe hoek tot een afronding en weer terug.
Dit wordt helemaal gemaakt met CSS. JavaScript en/of een plaatje komen er niet aan te pas.

De rechthoek is een 'gewone' <div> met een height, een width en een border. Het effect wordt bereikt door de border-bottom-left-radius en de border-bottom-right-radius in stapjes te veranderen. Het vloeiend verloop van zo'n transformatie wordt "animatie" genoemd.

Niet alle CSS-eigenschappen kun je animeren, bijvoorbeeld een style.
Een volledige lijst van volgens de specificatie animeerbare CSS-eigenschappen vind je onder andere op w3schools.com.

Hieronder staat een lijst met animeerbare CSS-eigenschappen. Deze lijst is niet volledig, er zijn er veel meer.

Eigenschap		Opmerkingen
background		Animeerbaar zijn background-color, background-position en background-size.
border		Animeerbaar zijn border-color en border-spacing. Zie ook de volgende regel.
border-top border-right border-bottom border-left		Animeerbaar zijn border-....-color en border-....-width, alsmede border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius en border-top-right-radius.
bottom top left right		Positionering van een element in een document
clip		Alleen een rechthoekig deel van een element laten zien.
color		Tekstkleur
column-count column-gap column-rule column-width		Deze alle zijn animeerbaar. column-rule-style is dat niet.
font		Animeerbaar zijn font-size en font-weight
letter-spacing		Ruimte tussen opeenvolgende karakters. Nedatieve waarden zijn toegestaan.
line-height		Regelafstand.
margin		De vier afzonderlijke marges zijn ook elk apart animeerbaar: margin-top, margin-right, margin-bottom en margin-left.
min-height max-height min-width max-width		Begrenzing van de afmetingen van een element. Wordt vaak gebruikt bij responsive website lay-outs.
opacity		Doorzichtigheid van een element.
outline		Animeerbaar zijn outline-color en outline-width.
padding		De vier afzonderlijke paddings zijn ook elk apart animeerbaar: padding-top, padding-right, padding-bottom en padding-left.
perspective		Beïnvloedt de dieptewerking van 3D-elementen.
perspective-origin		Beïnvloedt de kijkrichting naar 3D-elementen
text-indent		Verandert de inspringing van de eerste regel van een <p> ... </p>-tag.
text-shadow		Schaduw-effect rond tekst.
transform		Alle 2D-transformaties zijn animeerbaar. 3D-transformaties worden niet volledig ondersteund in Internet Explorer.
transform-origin		Hiermee kan een element worden verplaatst dat is geroteerd, verschoven, e.d.
vertical-align		Hiermee kun je een verticaal gepositioneerd element laten bewegen.
visibility		Zichtbaarheid van een element: Zichtbaar of onzichtbaar. Het neemt wel ruimte in.
word-spacing		Bepaalt de afstand tussen twee woorden.
z-index		Bepaalt de plaats van een element in een stapel.

Sommige van de eigenschappen in de tabel hebben nog een Vendor-prefix nodig.

Aan de techniek voor het maken van een animatie wordt hier geen aandacht besteed. Zie daarvoor de items Over @keyframes en Over transitions.