Basic animations
Every animation in Bmotion is the same shape: a state to start from, a state to end at, and a transition describing how to get between them. Learn that shape here and the rest of the library - springs, gestures, keyframes, layout - is the same component with more parameters.
Initial and Animate
Initial is the state the element is painted in before it has ever
animated; Animate is the state it heads for. The animation runs on mount
and again whenever Animate changes, so switching a target in your own state
is all it takes to animate - there is nothing to start or stop.
CSS properties
Animation is not limited to transforms. Colors, borderRadius and
boxShadow interpolate as values rather than snapping, and complex strings like
filter interpolate too: between two values of the same shape, every
number and embedded color inside them animates. Shapes that do not match snap to the
target instead.
3D transforms
perspective gives an element a vanishing point and
rotateX / rotateY / z turn it in that space.
They compose with the 2-D transforms into one transform value, so animating
x and rotateY at once never has the two fighting over the
property. originX / originY move the pivot everything turns
about - 0 is the left/top edge, 1 the right/bottom.