Your SlideShare is downloading. ×
0
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
CSS Transitions, Transforms, Animations
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

CSS Transitions, Transforms, Animations

5,066

Published on

Feb 23rd presentation at the <!DOCTYPE html> meetup at @hugeinc. …

Feb 23rd presentation at the <!DOCTYPE html> meetup at @hugeinc.

http://www.meetup.com/doctype-html/

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

No Downloads
Views
Total Views
5,066
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
107
Comments
0
Likes
4
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 Transitions, Transforms & Animations
    Tuesday February 23, 2011
  • 2. transitions
  • 3. Ch-ch-ch-ch-changes
    Class .a
    arrow === css3 transition == ZOMG
    Class .b
  • 4. What (are CSS3 transitions)?
    Sometimes we change CSS properties dynamically by
    changing or adding a class.
    e.g. $(‘input’).addClass(‘error’);
    CSS3 Transitions allow us to animate the change in
    these CSS properties… easily!
  • 5. Transitions defined & browser support
    -browser-transition: {property} {duration} {easing} {delay};
    easing defaults: linear, ease-in, ease-out, ease-in-out
    -webkit-transition: (Safari 3.1+, Chrome since forever)
    -moz-transition: (FF 4+)
    -o-transition: (Opera 10.doYouCare)
    -msie-transition: (apparently NOT ie9 )
  • 6. animations
  • 7. from {
    left: 100px;
    width: 100px;
    height: 100px;
    animation-timing: ease-in;
    }
    to {
    left: 200px;
    width: 50px;
    height: 50px;
    }
    keyframes
    but what’s going on in the middle?
    changing multiple styles at different times over an interval
    7
  • 8. keyframes (cont.)
    from {
    ...
    }
    to {
    transform: rotate(180deg);
    left: 200px;
    }
    60% {
    left: 100px;
    }
    30% {
    left: 200px;
    width: 50px;
    height: 50px;
    }
    8
  • 9. using animations programmatically
    Initializer
    • initAnimationEvent - Initializes an animation event given a DOMobject
    • 10. typeArg (string)
    • 11. canBubbleArg (boolean)
    • 12. cancelableArg (boolean)
    • 13. animationNameArg (string)
    • 14. elapsedTimeArg (float)
    Callbacks
    • animationStart
    • 15. animationEnd
    • 16. animationIteration
    9
  • 17. options
    animation-delay: 5s;
    • delay to start
    animation-direction: alternate;
    • animation is played in reverse on odd iterations
    animation-durations: 5s;
    • time to complete animation
    animation-iteration-count: 5;
    • times to play animation (doubled for alternate)
    animation-name: myAnimation;
    • unique ID for animation
    animation-play-state: paused;
    • pauses/plays the animation
    animation-timing-function: cubic-bezier(x1,y1,x2,y2)
    • a custom/predefined timing curve to follow
    10
  • 18. GPU vs. CPU
    hardware acceleration
    It’s the difference between...
    GPU’s are very good BitBLIT Operations
    11
  • 19. Animation Builders
    developers don’t want to code animations
    Banner Ads
    Purely Native Web Apps
    Native-Like Interfaces
    Immersive Sites
    (Sencha Animator)
    into the mainstream
    12
  • 20. examples
    13
  • 24. transforms
  • 25. transform: rotate(x)



    rotate(45deg)
    rotate(180deg)
    rotate(0deg)
  • 26. transform: scale(x)


    scale(2)
    scale(1)
  • 27. transform: translate(x, y)


    translate(0,0)
    translate(200px, 100px)
  • 28. transform: skew(x, y)

    skewX(25deg)
    skewY(25deg)
    skew(0deg, 0deg)
  • 29. transform: skew(x, y)
    25°

    25°
    skewX(25deg)
    skewY(25deg)
    skew(0deg, 0deg)
  • 30. transform: skew(x, y)

    skew(25deg, 25deg)
    skew(0deg, 0deg)
  • 31. transform: matrix(a,b,c,d,e,f)

    ???
  • 32. transform: matrix(a,b,c,d,e,f)
    a ce
    bdf
    0 0 1
    =
    matrix(a,b,c,d,e,f)
    3x3 matrix
  • 33. transform: matrix(a,b,c,d,e,f)
    1 0 0
    0 1 0
    0 0 1
    =
    matrix(1,0,0,1,0,0)
    3x3 matrix
  • 34. transform: matrix(a,b,c,d,e,f)
    2 0 0
    0 2 0
    0 0 1
    =
    matrix(2,0,0,2,0,0)
    3x3 matrix
  • 35. transform: matrix(a,b,c,d,e,f)
    =
    matrix(2,0,0,2,0,0)
    scale(2)
  • 36. transform: matrix(a,b,c,d,e,f)
    1 0 tx
    0 1 ty
    0 0 1
    sx 0 0
    0 sy 0
    0 0 1
    scale
    translate
    1 tan(a) 0
    tan(a) 1 0
    0 0 1
    cos(a)-sin(a) 0
    sin(a) cos(a) 0
    0 0 1
    rotate
    skew
  • 37. transform: matrix(a,b,c,d,e,f)
    -1 0 0
    0 1 0
    0 0 1
    1 0 0
    0 -1 0
    0 0 1
    -1 0 0
    0 -1 0
    0 0 1
    flip horizontal
    flip vertical
    flip both
  • 38. transform-origin: x, y
    transform-origin: 50% 50%
    transform-origin: top left
  • 39. Browser Support
    -moz-transform: rotate(45deg); // FF3.5+
    -webkit-transform: rotate(45deg); // Saf3.1+, Chrome
    -o-transform: rotate(45deg); // Opera 10.5
    -ms-transform: rotate(45deg); // IE9
    transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(
    M11=0.7071067811865476,
    M12=-0.7071067811865476,
    M21=0.7071067811865476,
    M22=0.7071067811865476,
    sizingMethod='auto expand'); // IE6 – IE9
  • 40. 3D Transformations
  • 41. What’s under the hood?
    1 0 0 0
    0 1 0 0
    0 0 1 0
    0 0 0 1
    4x4 matrix
  • 42. 3D functions
  • Other properties
    • transform-origin
    • 47. transform-style
    • 48. perspective
    • 49. perspective-origin
    • 50. backface-visibility
  • Examples
    • Snow Stack (safari only)
    • 51. Morphing Cube (safari only)
    • 52. Photo Cube (safari only)
    • 53. Bezier Builder (webkit only)

×