CSS Master

Lacking confidence with JavaScript?

Ifanyofthatwentoveryourhead,don’tworry.WebPlatformDocsexplainsthese

conceptsinitsguidetoprogrammingbasics,^8 orpickupDarrenJones’JavaScript:

NovicetoNinja.^9 UsingjQuery?TrythejQueryLearningCenter.^10

Nowlet’slookatourCSS.It’sonlyafewlineslong:

body {

background: #fcf;

transition: 5s;

}

.change {

background: #0cf;

}

Herewe’vedefinedastartingbackgroundcolorforourbodyelement,andatransition.
We’vealsodefineda.changeclass,whichhasadifferentvalueforbackground.
Whenoureventhandlerruns,itwilladdthechangeclasstoourbodyelement.This
willtriggeratransitionfromtheoriginalbackgroundcolortotheonedefinedin
the.changedeclarationblock,asshowninFigure5.3.

Ifyouwantatransitiontoworkinbothdirections—forexample,whentheclassis
bothaddedandremoved—youshouldaddittowhicheverdeclarationblockisyour
startstate.We’vedonethatherebyincludingthetransitionpropertyinthebody
declarationblock.Ifwemovedthetransitiontothechangeclass,ourtransition
wouldonlyworkwhenchangewasaddedtoourbodyelement,butnotwhenit
wasremoved.

(^8) https://docs.webplatform.org/wiki/concepts/programming/programming_basics
(^9) https://www.sitepoint.com/premium/books/javascript-novice-to-ninja
(^10) http://learn.jquery.com/
Transitions and Animation 195