Notallpropertiescanbeanimatedortransitioned.Onlypropertiesthatacceptin-
terpolatablevaluescan.Interpolationisamethodofcalculatingvaluesthatfall
withinarange.Interpolatablevaluesaretypicallynumericunitvaluessuchas
lengths,percentages,orcolors,sotheycan’tbeusedwithpropertiessuchasvisib-
ilityordisplay.Norcanweanimatetoorfromautovalues.^5
Creating Your First Transition
Inthisexample,we’llmakeourlinkcolortransitionfrombluetopinkwhenusers
movetheirmouseoverit,andbacktobluewhenusersmovestheirmouseoffit.
Here’sourbare-bonesHTML:
05-animations/transitions/simple.html (excerpt)
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Mouse over <a href="http://sitepoint.com/">this link</a>
➥ to see the transition effect.</p>
</body>
</html>ThisgivesusthepageshowninFigure5.1.
(^5) TheCSSTransitionsspecificationincludesalistofanimatableCSSpropertiesandvalues
[http://dev.w3.org/csswg/css-transitions-1/#animatable-css].
Transitions and Animation 191