Neal stublen nstublen@jccc edu
Download
1 / 27

HTML5 and CSS3 - PowerPoint PPT Presentation


  • 117 Views
  • Uploaded on

Neal Stublen nstublen@jccc.edu. 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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

nstublen@jccc.edu

HTML5 and CSS3


Chapter 8 css3 transforms and transitions

Chapter 8CSS3 Transforms and Transitions



Transforms1
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


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)

    -moz

    -ms

    -o


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)

    -moz

    -ms

    -o


The rotate property
The rotate property

  • Rotate elements

  • 0 to 360 degrees

    transform: rotate(angle);

    -webkit (display: inline-block)

    -moz

    -ms

    -o


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)

    -moz

    -ms

    -o


The origin property
The origin property

  • Redefine the origin for a transform

    transform-origin: x y;

    -webkit (display: inline-block)

    -moz

    -o


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?



Transitions1
Transitions

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

    -webkit

    -moz

    -o

  • 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

    delay


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



Keyframes
Keyframes

  • 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-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
Animation shorthand

  • Specify the animation in a single line

    -webkit-animation: name duration

    timing-function

    iteration direction

    fill-mode


Animation sample
Animation Sample

  • View a color animation

    • http://www.w3schools.com/css/css3_animations.asp

  • Add a rotation on :hover