neal stublen nstublen@jccc edu
Skip this Video
Download Presentation
HTML5 and CSS3

Loading in 2 Seconds...

play fullscreen
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
  • 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