27
CHAPTER 8
CSS3 TRANSFORMS AND TRANSITIONS
Transforms
Transforms Defined by the transform property
TranslateRotateScaleSkew
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, scaleOrigin?
Transitions
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.1stransition-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
Animations
Keyframes Allows control of intermediate states not
available through transitions
Create a named animation Attach the animation to an element
Create an animation Use the @keyframes rule
@-webkit-keyframes ‘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
http://www.w3schools.com/css/css3_animations.asp
Add a rotation on :hover
