The document discusses CSS3 transitions, transforms, and animations, explaining how they allow for smooth changes in CSS properties. It details various properties related to transitions and animations, browser support, and provides examples of CSS transformations. Additionally, it touches on hardware acceleration and animation builders for developers seeking to create visually engaging web applications.
What (are CSS3transitions)?Sometimes we change CSS properties dynamically bychanging or adding a class.e.g. $(‘input’).addClass(‘error’);CSS3 Transitions allow us to animate the change in these CSS properties… easily!
5.
Transitions defined &browser support-browser-transition: {property} {duration} {easing} {delay};easing defaults: linear, ease-in, ease-out, ease-in-out-webkit-transition: (Safari 3.1+, Chrome since forever)-moz-transition: (FF 4+)-o-transition: (Opera 10.doYouCare) -msie-transition: (apparently NOT ie9 )
from {left: 100px;width:100px;height: 100px;animation-timing: ease-in;}to {left: 200px;width: 50px;height: 50px;}keyframesbut what’s going on in the middle?changing multiple styles at different times over an interval7
optionsanimation-delay: 5s;delay tostartanimation-direction: alternate; animation is played in reverse on odd iterationsanimation-durations: 5s;time to complete animationanimation-iteration-count: 5;times to play animation (doubled for alternate)animation-name: myAnimation;unique ID for animationanimation-play-state: paused;pauses/plays the animationanimation-timing-function: cubic-bezier(x1,y1,x2,y2)a custom/predefined timing curve to follow10
18.
GPU vs. CPUhardwareaccelerationIt’s the difference between...GPU’s are very good BitBLIT Operations11
19.
Animation Buildersdevelopers don’twant to code animationsBanner AdsPurely Native Web AppsNative-Like InterfacesImmersive Sites(Sencha Animator)into the mainstream12