Neal stublen nstublen@jccc edu
1 / 27

HTML5 and CSS3 - PowerPoint PPT Presentation

  • Uploaded on

Neal Stublen [email protected] HTML5 and CSS3. Chapter 8 CSS3 Transforms and Transitions. Transforms. Transforms. Defined by the transform property Translate Rotate Scale Skew Apply to any element without affecting document flow

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' HTML5 and CSS3' - ohio

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Neal stublen nstublen@jccc edu

Neal Stublen

[email protected]

HTML5 and CSS3

Chapter 8 css3 transforms and transitions

Chapter 8CSS3 Transforms and Transitions


  • 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
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)




The scale property
The scale property

  • Resize elements – larger or smaller

  • Scale of 1.25 = 25% larger

    transform: scale(x, y);

    -webkit (display: inline-block)




The rotate property
The rotate property

  • Rotate elements

  • 0 to 360 degrees

    transform: rotate(angle);

    -webkit (display: inline-block)




The skew property
The skew property

  • Skew elements in the x and y directions

  • 0 to 360 degrees

    transform: skew(x, y);

    -webkit (display: inline-block)




The origin property
The origin property

  • Redefine the origin for a transform

    transform-origin: x y;

    -webkit (display: inline-block)



Apply multiple transforms
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
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?


  • Animate form elements

  • Apply a transformation over time instead of immediately

  • No JavaScript required

What can we animate
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
Create a transition

  • Specify the properties to be transitioned on :hover

    transition-property: background-color;




  • Include prefix on property as well when needed

How long
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
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
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
Putting it all together

  • A shorthand syntax allows everything to be specified together

    transition: property duration function


Not enough
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 ad1
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


  • Allows control of intermediate states not available through transitions

  • Create a named animation

  • Attach the animation to an element

Create an animation
Create an animation

  • Use the @keyframes rule

    @-webkit-keyframes ‘name’ {

    0% {

    opacity: 0


    20% {

    opacity: 0.5;


    100% {

    opacity: 1;



Attach to an element
Attach to an element

  • CSS properties attach an animation to an element





    -webkit-animation-direction: alternate


    -webkit-animation-fill-mode (stopped state)

    -webkit-animation-play-state (.js control)

Animation shorthand
Animation shorthand

  • Specify the animation in a single line

    -webkit-animation: name duration


    iteration direction


Animation sample
Animation Sample

  • View a color animation


  • Add a rotation on :hover