18 css transitions
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


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 Presentation Transcript

  • 1. CSS TransitionsAdding motion to your pages for fun and profit
  • 2. Intro to transitions—  The transforms chapter showed us how to change HTML elements—  This chapter shows how to change them gradually
  • 3. If it transforms, it can transition.
  • 4. 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;!}!
  • 5. Hands-on simple transitionDemo: Simple transition
  • 6. Transitions degrade gracefully—  If the browser doesnt support it, they still transform, but do it quickly
  • 7. Full syntax of transitionstransition: <property> <duration> <timing-function> <delay>!
  • 8. The property is the thing you wanttransitioned—  background-color—  height—  width—  top—  left—  rotation—  … or …—  all
  • 9. The duration is how long we shouldtake to transition from the first state tothe last—  In seconds or milliseconds—  5s—  5000ms
  • 10. The timing function tells how thetransition accelerates over time—  cubic-bezier(a, b, c, d)—  linear—  ease—  ease-in—  ease-out—  ease-in-out
  • 11. The transition delay tells how long towait before beginning—  Seconds or milliseconds
  • 12. 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;!} !
  • 13. 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;!
  • 14. Hands-on basic transitionsDemo: Basic transitions
  • 15. We can combine transitions#theDiv { transition-property: top, left; transition-duration: 3s, 1s; transition-delay: 0s, 3s;}
  • 16. Hands-on combined transitionsDemo: Combined transitions
  • 17. 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
  • 18. 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/