Presentation is loading. Please wait.

Presentation is loading. Please wait.

Neal Stublen Transforms  Defined by the transform property Translate Rotate Scale Skew  Apply to any element without affecting.

Similar presentations


Presentation on theme: "Neal Stublen Transforms  Defined by the transform property Translate Rotate Scale Skew  Apply to any element without affecting."— Presentation transcript:

1 Neal Stublen

2

3

4 Transforms  Defined by the transform property Translate Rotate Scale Skew  Apply to any element without affecting document flow  Elements occupy their original size and location for document flow

5 The translate property  Move elements left, right, up, down  Similar to position: relative but without flow implications transform: translate(x, y); -webkit (display: inline-block) -moz -ms -o

6 The scale property  Resize elements – larger or smaller  Scale of 1.25 = 25% larger transform: scale(x, y); -webkit (display: inline-block) -moz -ms -o

7 The rotate property  Rotate elements  0 to 360 degrees transform: rotate(angle); -webkit (display: inline-block) -moz -ms -o

8 The skew property  Skew elements in the x and y directions  0 to 360 degrees transform: skew(x, y); -webkit (display: inline-block) -moz -ms -o

9 The origin property  Redefine the origin for a transform transform-origin: x y; -webkit (display: inline-block) -moz -o

10 Apply Multiple Transforms  Applying multiple transforms can be done with a single line of CSS transform: translate(x, y) scale(x, y) …;

11 Apply transforms to an ad  Update the “Put up your dukes” ad to transform the element on :hover.  Find the element in the HTML  Update h1:hover Rotate, translate, scale Origin?

12

13 Transitions  Animate form elements  Apply a transformation over time instead of immediately  No JavaScript required

14 What can we animate?  Color (color, background-color)  Position (left, top, right, bottom)  Spacing (line-height, padding, margin)  Size (width, height)  Shadow (text-shadow)  Transparency (opacity)  Transformation (transform)

15 Create a transition  Specify the properties to be transitioned on :hover transition-property: background-color; -webkit -moz -o  Include prefix on property as well when needed

16 How long?  We need to specify the duration of the transition  Durations are specified in seconds (s) or milliseconds (ms) transition-duration: 0.5s; transition-duration: 500ms;  Required before you can see anything

17 Not smooth enough?  Use transition timing to control the animation transition-timing-function: function;  Available functions: ease, linear, ease-in, ease-out, ease-in-out

18 When should it start?  Control the start of the animation by adding a delay  Times specified in seconds (s) or milliseconds (ms) transition-delay: 0.1s transition-delay: 100ms  Delays can be negative

19 Putting it all together  A shorthand syntax allows everything to be specified together transition: property duration function delay

20 Not enough?  Specify multiple transitions with commas transition-property: transform, color; transition-delay: 0.2s, 0.1s; transition-timing-function: ease-out;  Similar for shorthand syntax

21 Apply transforms to an ad  Update the “Put up your dukes” ad to transition the element on :hover.  Find the element in the HTML  Update h1 to transition the color and transform

22

23 Keyframes  Allows control of intermediate states not available through transitions  Create a named animation  Attach the animation to an element

24 Create an animation  Use ‘name’ { 0% { opacity: 0 } 20% { opacity: 0.5; } 100% { opacity: 1; } }

25 Attach to an element  CSS properties attach an animation to an element -webkit-animation-name -webkit-animation-duration -webkit-animation-timing-function -webkit-animation-iteration-count -webkit-animation-direction: alternate -webkit-animation-delay -webkit-animation-fill-mode (stopped state) -webkit-animation-play-state (.js control)

26 Animation shorthand  Specify the animation in a single line -webkit-animation: name duration timing-function iteration direction fill-mode

27 Animation Sample  View a color animation ons.asp ons.asp  Add a rotation on :hover


Download ppt "Neal Stublen Transforms  Defined by the transform property Translate Rotate Scale Skew  Apply to any element without affecting."

Similar presentations


Ads by Google