Post on 10-May-2015
Graceful degradation with jQuery
CSS 3Transitions and Animations
About me
• Andrea Verlicchi
• Gruppo Euris - Bologna
• Senior Front End Developer & Team Leader in Yoox Group
• www.andreaverlicchi.eu verlok
NEW IN CSS 3
NEW IN CSS 3
• New styles
• Transforms
• Transitions
• Animations
New styles
• border-radius
• box-shadow
• text-shadow
• rgba / hsla
• gradients
Transforms
• scale
• rotate
• skew
• translate 2D
• translate 3D
Transitions
Change between states gradually in time
Animations
Automatic transition through states (keyframes) defined in a time line
Any doctype
CSS 3 works on any version of x/html HTML 5, HTML 4, XHTML 1, etc.
BROWSERS
BROWSER SUPPORT
10+ All All All 12+
IE 9: Basic IE 8, 7, 6: No
Browser stats (Oct 2012)
CHROME
INTERNET EXPLORER
FIREFOX
SAFARI
OPERA
OTHER
Browser versions (Oct 12)
IE 9IE 8
IE 7
IE 6
Mobile browsers (Oct 12)
ANDROID
IPHONEOPERA
NOKIAUC BROWSER
NETFRONTBLACKBERRY
IPODDOLFIN
+SAFARI
Windows 8 + IE 10 Release
BROWSERS ARE READY FOR CSS 3
CSS 3 TRANSITIONS
vsJAVASCRIPT
ANIMATIONS
Low effort
BETTER RESULTS
Best performanceGPU acceleration
No queue
Consistent layoutBrowser-triggered
animations
Users don’t have to wait
CSS-driven final state
Asynchronous Zoom, MQ switch
They run on a separate thread
Expecially on mobile devices
Development time(and maintenance)
IE 8 + 9 will be around for a while.Do we have to write twice the code
to do the same thing?
NO
Progressive enhancement
Do you really want to / need to replicate EVERY effect you CAN create using CSS
transitions?
Low redundancy
If you really need to replicate an effect, the code redundancy is VERY LOW
HOW DO WE DO IT?
A transition is about animating the change of value of one or more element
properties in a given time.
SO WE NEED TO...
• Consider an element in the DOM• Define what element properties to
transition• Define in how much time the
properties will change• Define a final state for the element
properties
Using a CSS selector.I.g.: All the links in the page
a {}
CONSIDER AN ELEMENT IN THE DOM
Using the “transition-duration” property
a { transition-duration: 1s;}
DEFINE IN HOW MUCH TIME THE PROPERTIES CHANGE
Using the “transition-property” property
DEFINE WHAT ELEMENT PROPERTIES TO TRANSITION
a { transition-duration: 1s; transition-property: color;}
3 possible ways:
• Using an auto-applied pseudo class
• Using a class
• Using Javascript
DEFINE A FINAL STATE FOR THE ELEMENT PROPERTIES
FINAL STATE WITH A PSEUDO-CLASS
a:hover { color: red;}
The link color will transition to red on mouseover state
FINAL STATE WITH A CLASS
a.selected { color: black;}
The link color will transition to black when the selected class is applied to it
FINAL STATE USING JAVASCRIPT
$(‘a’).css(‘color’, ‘blue’);
The link color will transition to blue when this line of code is executed
DEMO
WHAT ABOUT OLD IE VERSIONS?
GRACEFUL DEGRADATION
DESIGN FOR MODERN BROWSERS
but make your site work perfectly for OLDER VERSIONS that are still out there
(maybe with less effects)
GRACEFUL DEGRADATIONin TRANSITIONS
In which cases should we implement a fallback, javascript based
transition?
WE SHOULD NOTWhen the transitions are merely for
“coolness”, or they may negatively affect site load time or runtime performance
WE SHOULDWhen transitions are useful for the site
comprehension, usability, to attract users, etc.
DETECTING BROWSER FEATURES
USE MODERNIZR!
• Go to http://modernizr.com/
• Download development version of Modernizr
• Copy it in your site folder
• Link it in your site header
WHAT MODERNIZR DOES:
For each result:
• It creates a boolean property of a global object called Modernizr
• It adds a css class to the html element of the page
WHAT MODERNIZR DOES:
Example:
• Modernizr.csstransitions (true/false)
• <html class=“csstransitions”>note: the negative result no-csstransitions
WHAT YOU CAN DO:
• JS: Create alternative lines of Javascript code to manage CSS transitions / Javascript transitions
• CSS: Manage exceptions depending on the browser support to CSS transitions
EXAMPLE OF JS FALLBACK
var newLeft = SOME_VALUE;
// Set the new left if browser can handle css transitions// else animate it the left propertyif (Modernizr.csstransitions) { this.bannerContainer.css({ left: newLeft });} else { this.bannerContainer.animate({ left: newLeft }, 750);}
EXAMPLE OF CSS FALLBACK
#someBox { background-color: rgba(255, 255, 255, 0.5);}
html.no-rgba #someBox { background-image: url(‘../img/white_50_percent.png’);}
DEMO
WHAT ABOUT ANIMATIONS?
WHAT ARE ANIMATIONS
Animations allow us to define states in time (keyframes) and transition through them
CSS ANIMATIONS
• Name an animation
• Define a set of keyframes
• Define the CSS properties for each frame
• Apply the animation in time
= Automatic transition bewteen keyframes
DECLARATION
@keyframes bounceThenFly { 0% { background-position: -13px 42px } 10% { background-position: -7px 30px } 20% { background-position: -13px 42px } 30% { background-position: -7px 30px } 40% { background-position: -13px 42px } 50% { background-position: 40px -60px } 50.01% { background-position: -35px 120px } 98% { background-position: -13px 42px }}
Defining the animation “bounceThenFly”
DECLARATION
@keyframes anotherAnimation { // ...
50% { background-color: red; color: white; text-shadow: 0 0 10px black; }
// ...}
(each keyframe can be more complex)
USAGE
#rocket {animation-name: bounceThenFly;animation-duration: 5s;animation-iteration-count: infinite;
}
The #rocket element will use the animation “bounceThenFly” during a time of 5 seconds,
and repeat it infinitely
USAGE
#rocket {animation: bounceThenFly 5s infinite;
}
Less characters = happier coders & lighter CSS
#rocket {animation: bounceThenFly 5s infinite;
}
USAGE
animation-name animation-duration animation-iteration-count
Less characters = happier coders & lighter CSS
DEMO
INTO THE WILD
VENDOR PREFIXES
For the CSS rules that are still to be defined as a standard, we need to use vendor-prefixes
-webkit- -moz- -ms- -o-
MARCH 2012
For the CSS rules that are still to be defined as a standard, we need to use vendor-prefixes
VENDOR PREFIXES
-webkit- -o-
OCTOBER 2012
For the CSS rules that are still to be defined as a standard, we need to use vendor-prefixes
VENDOR PREFIXES
-webkit-
____ 2013 ?
For the CSS rules that are still to be defined as a standard, we need to use vendor-prefixes
VENDOR PREFIXES
Option A
transition: color 500ms ease-in-out;
-webkit-transition: color 500ms ease-in-out;-o-transition: color 500ms ease-in-out;transition: color 500ms ease-in-out;
Manually duplicate the code From:
To:
Option B
Client-side: PrefixFreehttp://leaverou.github.com/prefixfree/
Server-side: Prefixerhttp://cssprefixer.appspot.com/
Use a script to do it automatically
RESUME
TRANSITIONS
• FOR LITTLE GRAPHIC TRANSITIONSwithout detect and fallback
• FOR RELEVANT GRAPHIC TRANSITIONSwith Javascript detect and fallback
• FOR EVERY TRANSITION on MOBILEno real need of detect and fallback
ANIMATIONS
• TO CREATE ANIMATED ELEMENTS IN SITESi.g. banners, call-to-action buttons, logos, graphical background elements
• SEE:http://2012.fromthefront.it
• They make a more pleasant user experience for users with modern browsers
• They are optimized for mobile devices
@verlokwww.andreaverlicchi.eu