Css3 transitions and animations + graceful degradation with jQuery

CSS 3
Transitions and Animations

Graceful degradation with jQuery

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 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) deﬁned in a time line

Any doctype

CSS 3 works on any version of x/html
HTML 5, HTML 4, XHTML 1, etc.

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 9
IE 8

IE 7

IE 6

Mobile browsers (Oct 12)
ANDROID

IPHONE
OPERA
NOKIA
UC BROWSER
NETFRONT
BLACKBERRY
IPOD +
DOLFIN SAFARI

CSS 3
TRANSITIONS
vs
JAVASCRIPT
ANIMATIONS

BETTER RESULTS
No queue
Users don’t have to wait GPU acceleration
Best performance
Expecially on mobile devices

Consistent layout
CSS-driven ﬁnal state
Browser-triggered
animations
Zoom, MQ switch
Asynchronous
They run on a separate thread

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?

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

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

CONSIDER AN ELEMENT IN
THE DOM

Using a CSS selector.
I.g.: All the links in the page

a {}

DEFINE IN HOW MUCH TIME
THE PROPERTIES CHANGE

Using the “transition-duration” property

a {
transition-duration: 1s;
}

DEFINE WHAT ELEMENT
PROPERTIES TO TRANSITION

Using the “transition-property” property

a {
transition-duration: 1s;
transition-property: color;
}

DEFINE A FINAL STATE FOR
THE ELEMENT PROPERTIES

3 possible ways:
• Using an auto-applied
pseudo class
• Using a class
• Using Javascript

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

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
DEGRADATION
in TRANSITIONS

In which cases should we implement
a fallback, javascript based
transition?

WE SHOULD NOT
When the transitions are merely for
“coolness”, or they may negatively affect site
load time or runtime performance

WE SHOULD
When transitions are useful for the site
comprehension, usability, to attract users, etc.

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 property
if (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’);
}

WHAT ARE ANIMATIONS

Animations allow us to deﬁne states in time
(keyframes) and transition through them

CSS ANIMATIONS

• Name an animation
• Deﬁne a set of keyframes
• Deﬁne the CSS properties for each frame
• Apply the animation in time
= Automatic transition bewteen keyframes

DECLARATION
Deﬁning the animation “bounceThenFly”

@keyframes bounceThenFly {
0% { background-position: -13px 42px }
50% { background-position: 40px -60px }
50.01% { background-position: -35px 120px }
}

DECLARATION
(each keyframe can be more complex)

@keyframes anotherAnimation {

// ...

50% {
background-color: red;
color: white;
text-shadow: 0 0 10px black;
}

// ...
}

USAGE
The #rocket element will use the animation
“bounceThenFly” during a time of 5 seconds,
and repeat it inﬁnitely

#rocket {
animation-name: bounceThenFly;
animation-duration: 5s;
animation-iteration-count: infinite;
}

USAGE
Less characters = happier coders & lighter CSS

#rocket {
animation: bounceThenFly 5s infinite;
}

USAGE
Less characters = happier coders & lighter CSS

#rocket {
animation: bounceThenFly 5s infinite;
}

animation-name animation-duration animation-iteration-count

VENDOR PREFIXES

For the CSS rules that are still to be deﬁned as a
standard, we need to use vendor-preﬁxes

VENDOR PREFIXES

-webkit- -moz- -ms- -o-

MARCH 2012

VENDOR PREFIXES

-webkit- -o-

OCTOBER 2012

VENDOR PREFIXES

-webkit-

____ 2013 ?

Option A
Manually duplicate the code From:
transition: color 500ms ease-in-out;

To:
-webkit-transition: color 500ms ease-in-out;
-o-transition: color 500ms ease-in-out;
transition: color 500ms ease-in-out;

Option B
Use a script to do it automatically

Client-side: PrefixFree
http://leaverou.github.com/prefixfree/

Server-side: Prefixer
http://cssprefixer.appspot.com/

TRANSITIONS

• FOR LITTLE GRAPHIC TRANSITIONS
without detect and fallback
• FOR RELEVANT GRAPHIC TRANSITIONS
with Javascript detect and fallback
• FOR EVERY TRANSITION on MOBILE
no real need of detect and fallback

ANIMATIONS

• TO CREATE ANIMATED ELEMENTS IN SITES
i.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

@verlok
www.andreaverlicchi.eu

Css3 transitions and animations + graceful degradation with jQuery

Recommandé

Recommandé

Contenu connexe

Similaire à Css3 transitions and animations + graceful degradation with jQuery

Similaire à Css3 transitions and animations + graceful degradation with jQuery (20)

Plus de Andrea Verlicchi

Plus de Andrea Verlicchi (7)

Dernier

Dernier (20)

Css3 transitions and animations + graceful degradation with jQuery