CSS 3


Transitions

Rotations

Animations


Slides: http://slid.es/amanda_giles/css3-transitions

TRANSITIONS


CSS Transitions allow us to transition a whole element (or just a particular CSS property of an element)
from one state to another.

Transition definition includes:
property: all, none, opacity, height, color, padding, etc.
duration: time in seconds (1s, 4s, 7s)
timing function/curve: indicates the flow of the          transition
delay: time in seconds (0s, 5s, 10s, etc.)

TRANSITIONS


Until the specification in finalized, using vendor prefixes is still a good idea:

-webkit-transition: property_name duration timing_function delay;  				
   -moz-transition: property_name duration timing_function delay;  				
     -o-transition: property_name duration timing_function delay;  				
        transition: property_name duration timing_function delay;

These properties can also be specified individually, but then you should still add the vendor prefixes:

transition-property: property_name; 				
transition-duration: duration; 				
transition-timing-function: timing_function; 				
transition-delay: delay;

TRANSITIONS


Values for transition-property can include:

all     none     color     opacity

padding     border     margin     background-color

line-height     font-size     font-weight     letter-spacing

z-index     width     height     left     top

Full list at http://www.w3.org/TR/css3-transitions/#animatable-properties

TRANSITIONS


  • The transition-timing-function property refers to the arc of the timing from the beginning state to the end state. 
  • It allows for the effect to change speed over the duration of the transition. 
  • This is based on cubic Bézier curves. 
  • It can be a known timing function or it can be a custom defined arc.

TRANSITIONS


The arc consists of 4 points with X & Y coordinates.






Point 1 is always (0,0) and Point 4 is always (1,1)
Points 2 & 3 are defined by the timing function.
These numbers can even be negative!

TRANSITIONS


Values for transition-timing-function can include:

linear - equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease - equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in - equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out - equivalent to cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out - equivalent to cubic-bezier(0.42, 0, 0.58, 1)
cubic-bezier - custom definition in the format:
cubic-bezier(pt2-x, pt2-y, pt3-x, pt3-y)

TRANSITIONS


You can combine multiple transitions together by comma separating either the complete transition the individual properties.




ROTATIONS


Rotation is a transformation which 
allows you to rotate an element.

Rotation can be specified in 4 different units
transform: rotate(90deg);   /* Degrees - 360 degrees in a circle */
transform: rotate(100grad); /* Gradians - 400 gradians in a circle */
transform: rotate(1.57rad); /* 2π Radians in a full circle, equal to                                   6.2831853rad. */
transform: rotate(.25turn); /* Turns - a complete rotation  =  1 turn */

ROTATIONS


  • Rotations by default start from the center of an element. This can be changed with the transform-origin property.
  • The original space used by the object will be retained, but the rotation may cover up other objects.
  • If overflow is set to scroll or auto, then scroll bars may appear when an object is rotated.
  • rotate(0) will not work - the unit must always be specified

OTHER TRANSFORMATIONS


Rotate is just one of the CSS 3 Transforms which also includes:
scale - size any HTML element larger or smaller
scaleX - size any HTML element larger only on the horizontal, or flip it (with negative values)
scaleY - size any HTML element larger only on the vertical, or flip it (with negative values)
translate, translateX, translateY - move an HTML element along the X or Y axis (or both)
skewX, skewY - tilt an element along X or Y axis (like a parallelogram)

MULTIPLE TRANSFORMATIONS


If multiple transformations are to be performed 
(for instance, scale and rotate), 
they can be combined into a single transform statement with a space between them.

transform: rotate(-5deg) scale(1.5);

TRANSFORMATION SUPPORT











is pretty good!
http://caniuse.com/#feat=transforms2d

LET's PLAY


http://css3.bradshawenterprises.com/transitions/

http://zurb.com/playground/css3-polaroids

ANIMATIONS


Animations allow you to specify a timeline of when certain CSS properties should take place. 

Animations can use transformations or 
other CSS properties.


ANIMATIONS












Support is great - vendor prefixes still suggested.

ANIMATIONS


Hands-On is the best way to see and play with this:

http://www.justinaguilar.com/animations/


Made with Slides.com