css_transitions.md

CSS Transitions

• allow property changes to take place over a period of time

what's animatable?

• list of animatable properties
• the properties need an initial state in order to change from something to something. ⋅⋅* b/c of this, be careful when transitioning on an object that was just added to the DOM. use setTimeout()

how to animate

• the property needs an initial transition -- where you define and control how the property will change -- and then the transform description on the "new state" (e.g. .box:hover or .box.animate-me) ⋅⋅* e.g.

.box {
  height: 100px;
  width: 100px;
  background-color: black;
  display: block;
  -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
  transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
}
.box:hover {
  height: 200px;
  width: 200px;
  background-color: red;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

⋅⋅⋅ --> notice that height width background-color don't need any more description on how to change other than what's laid out in transition. transform on the other hand needs a <transform-function> ⋅⋅⋅ ⋅⋅* transform

css properties to define transitions

• each transition takes a few properties: ⋅⋅* transition-property - which css properties the transitions should be applied to ⋅⋅* transition-duration - how long the transition should occur ⋅⋅* transition-timing-function - bezier curve goodness ⋅⋅* transition-delay - delay if any
• shorthand

div {
  transition: <property> <duration> <timing-function> <delay>;
}

completing transition

• when transition completes, a single event is fired: transitionend or webkitTransitionEnd

simple example

#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}

• reason the object needs transition-properties before anything has happened (#delay1) is because a) it needs something to transition from, and b) when you un-hover, the transitions on #delay1 are applied. otherwise it would just snap back to the way it was originally

check it mdn