CS 50.12 HTML 5 :: Interactive Web Pages

CSS3 - Transform & Transitions

View CCCConfer video of class lecture

Learning Objectives

  • Using CSS3 transitions / transform to modify and animate

Transform :: rotate :: scale :: skew :: translate (to offset)

W3C standard syntax (currently under review so we use brower specific prefixes)

transform: rotate(20deg)

transform property:         transform function

transform: scale(2)

transform property:         transform function

transform: skew(10deg)

transform property:         transform function

transform: translate(100px 100px)

transform property:         transform function

 

----------

transform-origin: left top

transform property:          value

---------

 

http://westciv.com/tools/transforms/

Use this site to experiment with translate values - it will supply needed code.

Gallery I started with - no CSS transform or transitions.

Gallery sampler with images that rotate, scale, skew,and translate (also called offset)

Transition properties

transition-property

  • values can be :: all, height, width, etc

transition-duration

  • value 5s or if you have multiple properties you will be animating use 5s, 1s

transition-timing-function

  • linear - animation is constant over time
  • ease - starts fast then slows
  • ease-in - animation speeds over time
  • ease-out - animation slows over time
  • ease-in-out - animation speeds up then slows down

transition-delay

  • value in seconds 1s (delays the start of an animation)

Gallery which shows scale in several variations including 2 that require animation