Download presentation
Presentation is loading. Please wait.
Published byEmilio Kenderdine Modified over 10 years ago
1
Neal Stublen nstublen@jccc.edu
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?
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
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 the @keyframes rule @-webkit-keyframes ‘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 http://www.w3schools.com/css/css3_animati ons.asp http://www.w3schools.com/css/css3_animati ons.asp Add a rotation on :hover
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.