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