HTML5 and CSS3

1. Neal Stublen nstublen@jccc.edu HTML5 and CSS3

2. Chapter 8CSS3 Transforms and Transitions

3. Transforms

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. Transitions

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. Animations

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_animations.asp • Add a rotation on :hover