CSS Master

Stepped Transitions Withsteppedtransitions,theplaycycleisdividedintointervalsofequalvalueand duration.Wecansethowmanyintervalsat ...

Figure 5.5. A cubic Bézier curve, where the filled circles are the control points Theargumentspassedtothecubic-bezierfunctionrep ...

Figure 5.6. A graph of cubic-bezier(0.42, 0, 1, 1) Inmostcases,it’seasiertouseatimingfunctionkeyword.Wementionedstep- startandst ...

Transitioning Multiple Properties It’spossibletotransitionmultiplepropertiesofasingleelementusingatransition list.Let’slookatane ...

var element, transitionEndHandler; transitionEndHandler = function(evt) { // Do something. } element = document.getElementById(' ...

li { transition: 500ms; } .fade { opacity: 0; } /* For browsers that don't support the hidden attribute */ [hidden] { display: n ...

05-animations/transitions/transition-end.html (excerpt) var form, changeHandler; changeHandler = function() { // Select unchecke ...

var transitionendHandler = function(eventObject) { eventObject.target.setAttribute('hidden', ''); document.getElementById('thank ...

var transitionendHandler = function(eventObject) { $(eventObject.target).attr('hidden', ''); $('#thanks').removeAttr('hidden'); ...

■ Animationsusekeyframes,whichoffertheabilitytocreatemorecomplexeffects. ■ Animationscanbepausedinthemiddleoftheplaycycle. Thela ...

var hasAnimations = CSS.supports('animation-duration','2s');^18 TheotheroptionistousetheModernizrJavaScriptlibrary^19 anditsMode ...

transform: scale(1); opacity: 1; } } Thiscodewillscaleourobjectfromhalfitssizetoitsfullsize,andchangethe opacityfrom80%to100%.^2 ...

@keyframes fade { from { opacity: .5; } to { opacity: 1; } } Thenwecouldcombinethemaspartofasingleanimation: .pulse-and-fade { a ...

Table 5.5. Animation properties Propertya Description Initial value 0s (executes immediately) How long to wait before executing ...

otherUnicode)charactersusuallywill.Forclarityandmaintainability,it’sagood ideatogiveyouranimationsdescriptivenames,andavoidusing ...

.pulse { animation: pulse 500ms infinite; } Playing Animations: the animation-direction Property There’sstillaproblemwithouranim ...

.pulse { animation: pulse 500ms infinite alternate-reverse; } Using Percentage Keyframes Ourpreviousexamplewasasimplepulseanimat ...

.wiggle { animation: wiggle 500ms; } There’sjustoneproblemhere.Whenouranimationends,itgoesbacktotheoriginal, pre-animatedstate.T ...

hand,canbepausedpart-waythroughtheplaycycleusinganimation-play-state. Ithastwodefinedvalues:runningandpaused,anditsinitialvaluei ...

Detecting When Animations Start, End, or Repeat Liketransitions,animationsfireaneventwhentheyend:animationend.Unlike transitions ...