Neal Stublen

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

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

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

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

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

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

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

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?

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

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)

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

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

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

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

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

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

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

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

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

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)

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

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