18 css transitions

Uploaded on


More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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/