How to use CSS3 transitions

css_transitions.md

How to CSS3 transition

on the element that you want to transition you can apply the transition css property.

transition-property refers to the css property affected by the transition - for example (top, left, margin, color, etc)

transition-duration refers to the time the animation takes place

transition-timing-funcion refers to the way the transition is applied over the duration - ease ease-in ease-out ease-in-out linear cubic-bezier(x, y, x2, y2) - note x/y can be negative values - you can create all standard timing funcs with cubic-bezier

trasition-delay - is a delay before the transition is triggered

.element {
  transition:  [ 
   <transition-property> ||
   <transition-duration> ||
   <transition-timing-function> ||
   <transition-delay> 
  ]
}

you can also specify transition properties individually like so, this also lets us animate properties independent of each other

.element {
  transition-property: top, left, border-radius, background-color;
  transition-duration: 2s, 1s, 0.5s, 0.5s;
  transition-delay: 0s, 0.5s, 1s, 1.5s;
}

browser support

• ie10+ (opera, ff, chrome, webkit ok, mobile webkit ok too)
• vendor prefixes

how it works

• when a new style prop is applied to an element that has the transition prop, it becomes actived and the change to that new prop value is transitioned according to the duration and timing function (and is optionally delayed)

caveats

• using transitions on css props like left, margin, etc forces the browser to recalculate styles which can be slow/expensive
• an alternative is to use css transforms to offload computation to the gpu - especially important for mobile devices
• a downside to using transforms however is that it breaks subpixel antialiasing on fonts - so they look shitty.

transform

Examples

• rotate - transform: rotate(1deg);
• change the size - transform: scale(1.5);, transform: scaleX(.5);, transform: scaleY(1.5);
• move th element - transform: translate(px, %);, transform: translateX(-10px);, transform: translateY(10%);
• transforms can be composed as well, transform: rotate(25deg) scale(.75);

by default the transform operates on an element assuming the center is the origin. you can specify the origin of a transform using transform-origin: 0 0 === transform-origin: top left instead.

animations, keyframes

• similar syntax to transforms, but allow you to build up different values over the course of an animation

example

@keyframes slide { // note: vendor prefix for @keyframes
  0% {
    left: 0;
    top: 0;
  }
  50% {
    left: 244px;
    top: 100px;
  }
  100% {
    left: 488px;
    top: 0;
  }
}

• you can use an animation keyframe like a transition, animation: <animation-name> <duration> <timing-function> <delay>

• animations can also be specified to iteration a set number of times or infinite: animation-iteration-count: infinite

• animations can also animate directionally: animation-direction: alternate;

links

http://oli.jp/2010/css-animatable-properties/ - list of props http://css3.bradshawenterprises.com/transitions/ http://matthewlein.com/ceaser/ - timing functions http://cubic-bezier.com/#.17,.67,.83,.67 - timing http://blog.alexmaccaw.com/css-transitions http://css-tricks.com/tale-of-animation-performance/ - why use translate