18 css transitions
Upcoming SlideShare
Loading in...5
×
 

18 css transitions

on

  • 1,266 views

 

Statistics

Views

Total Views
1,266
Views on SlideShare
1,265
Embed Views
1

Actions

Likes
0
Downloads
16
Comments
0

1 Embed 1

http://www.verious.com 1

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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/