Your SlideShare is downloading. ×
0
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
18 css transitions
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

18 css transitions

1,065

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,065
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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/

×