18 css transitions
Upcoming SlideShare
Loading in...5

18 css transitions






Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.verious.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

18 css transitions 18 css transitions Presentation Transcript

  • CSS TransitionsAdding motion to your pages for fun and profit
  • Intro to transitions—  The transforms chapter showed us how to change HTML elements—  This chapter shows how to change them gradually
  • If it transforms, it can transition.
  • On the element you want to haveanimate, add the following CSS#id_of_element {! /* Chrome and Safari */! -webkit-transition: all 1s ease-in-out;! /* Firefox */! -moz-transition: all 1s ease-in-out;! /* Opera */! -o-transition: all 1s ease-in-out;! /* Internet Explorer */! -ms-transition: all 1s ease-in-out;! /* Everything */! transition: all 1s ease-in-out;!}!
  • Hands-on simple transitionDemo: Simple transition
  • Transitions degrade gracefully—  If the browser doesnt support it, they still transform, but do it quickly
  • Full syntax of transitionstransition: <property> <duration> <timing-function> <delay>!
  • The property is the thing you wanttransitioned—  background-color—  height—  width—  top—  left—  rotation—  … or …—  all
  • The duration is how long we shouldtake to transition from the first state tothe last—  In seconds or milliseconds—  5s—  5000ms
  • The timing function tells how thetransition accelerates over time—  cubic-bezier(a, b, c, d)—  linear—  ease—  ease-in—  ease-out—  ease-in-out
  • The transition delay tells how long towait before beginning—  Seconds or milliseconds
  • Put them all together like so …!#theDiv {! width: 10px;! transition-property: width;! transition-duration: 2s;! transition-timing-function: ease-in-out;! transition-delay: 1s;!}!… or …#theDiv {! width: 10px;! transition: width 2s ease-in-out 1s;!} !
  • Just like with transforms, you need toprefix some of the transitions with theengine-webkit-transition: all 0.5s ease-in-out; !-moz-transition: all 0.5s ease-in-out;!-ms-transition: all 0.5s ease-in-out;!transition: all 0.5s ease-in-out;!
  • Hands-on basic transitionsDemo: Basic transitions
  • We can combine transitions#theDiv { transition-property: top, left; transition-duration: 3s, 1s; transition-delay: 0s, 3s;}
  • Hands-on combined transitionsDemo: Combined transitions
  • Conclusion—  The new transition features allow us to create smooth transforms—  We no longer need JavaScript or DHTML. It can all be done with CSS—  We can tune the duration, initial delay, and the easing function—  We can combine transitions to make it really look good
  • Further resources—  W3C Transition spec ◦  http://www.w3.org/TR/css3-transitions/#properties- from-css—  Good transition tutorials ◦  http://www.w3schools.com/css3/ css3_transitions.asp ◦  http://css3.bradshawenterprises.com/transitions/