CSS Master

CSS Transitions

CSStransitions^2 areaCSS-basedwaytoupdatethevalueofaCSSpropertyovera

specifiedduration.Givenastartvalueandanendvalue,thebrowserwillinterpolate

in-betweenvaluesoverthecourseofthetransition.They’regreatforsimpleeffects

whereyoudon’tmindgivingupcontroloverhowtheanimationprogresses.

Inmyownwork,Ioftenusetransitionsfor:hoverstates.Ialsousethemwhenre-

vealingorconcealingcontent,suchasshowinganoff-screenmenu.Youcouldcreate

animationsforsucheffects,butanimationsaregenerallymoreverbose,asyou’ll

seelaterinthechapter.

BrowsersupportforCSStransitionsisquitegood(seeTable5.1),withthelatest

versionsofallmajordesktopandmobilebrowserssupportingthem.Inmost—UC

Browserbeingtheexception—novendorprefixisnecessary.Ofcourse,ifyour

audienceisstillheavywithpeoplewhouseolderversionsofFirefoxorSafari,

you’llwanttoincludetheappropriateprefixes(-moz-and-webkit-respectively).

Table 5.1. Browser support for CSS transitions (Source CanIUse.com^3 )

Internet Opera Safari Android UC Browser

Explorer

Chrome Firefox

9+ (require

-webkit-

prefix)

2.1 (versions

< 4.4

require

-webkit-

prefix)

3.1+

(versions

6.1 require

-webkit-

prefix)

1 0.5+

(versions <

12.1 require

-o- prefix)

4+ (versions 1 0+

< 16 require

-moz-

prefix)

4+ (versions

< 26 require

-webkit-

prefix)

Transitionsalsodegradegracefully.Inbrowserswithoutsupportforthem,users

willjustseeatransition-freechangebetweenthetwovalues.Thismaybejarring—for

example,whenshowingorhidingcontent—butitwon’tbreakyoursite’sfunction-

ality.AnalternativeistouseaJavaScriptlibrary.jQuery,forexample,hasseveral

simpleanimationmethods.^4 Firsttesttoseewhetherthebrowsersupportstransitions

(oranimations),andfallbacktoJavaScriptmethodsifitdoesnot.

(^2) http://dev.w3.org/csswg/css-transitions/
(^3) http://caniuse.com/#search=transitions
(^4) http://api.jquery.com/category/effects/
190 CSS Master