What is tweening in css?

Answer 1

The pose-to-pose option is to create a few keyframes throughout the sequence, and then fill in the gaps later. Filling in these gaps is known as “in-betweening,” or “tweening,” a familiar term for those used to animating in Flash. With CSS animation, we typically use the latter, pose to pose.

Tweens a DOM element using CSS matrix3d() and 4x4 matrix interpolation (decomposition/recomposition). This allows for a smooth range of 3D rotations (using quaternions and spherical interpolation) without gimbal lock.

Typically used with tween-ticker or tweenr. Example:

var tweenr = require('tweenr')()
var Transform = require('tween-css-transform')

//you can specify transform strings 
var tween1 = Transform(element, {
    duration: 1,
    delay: 0.5, 
    ease: 'expoOut',
    start: 'translateX(10px) rotateX(90deg)'
    end: 'matrix(1,0,0,1,0,0)'
})
tweenr.to(tween1)

//or you can "compose" a matrix with 3D components 
var tween2 = Transform(element, {
    duration: 1,
    delay: 2,
    end: { 
        rotation: [0, Math.PI/2, 0],
        translation: [25, 15, 50],
        scale: [1, 1.25, 1.5]
    }
})
tweenr.to(tween2)

//a "from-to" tween, tweens from given transform to its initial state 
var tween3 = Transform(foobar, {
    duration: 1,
    start: 'translateX(25px)'
})
tweenr.to(tween3)