Animation

1.默认第一个参数即动画时间,不传值时使用默认预设参数值。
2.每次调用该函数时,只生成所使用动画的对应keyframes。

.goTop / .goBottom / .goLeft / .goRight(@time:1s,@position:-100%~100%,@ease:ease-out,@fillmode:forwards)位移

位移变化,无渐隐,可用作菜单。

See the Pen wgmBrK by iRuxu (@iRuxu) on CodePen.

.fadeIn / .fadeInTop / .fadeInBottom / .fadeInLeft / .fadeInRight(@time:1s,[@position:-100%~100%,]@ease:ease-out,@fillmode:backwards)渐入

渐入动画,默认位移100%自身位置。

See the Pen Animation Test for CssLab by iRuxu (@iRuxu) on CodePen.

.fadeOut / .fadeOutTop / .fadeOutBottom / .fadeOutLeft / .fadeOutRight(@time:1s,[@position:-100%~100%,]@ease:ease-out,@fillmode:forwards)渐出

渐出动画,默认位移100%自身位置。

See the Pen EZQqER by iRuxu (@iRuxu) on CodePen.

.lightSpeedIn / .lightSpeedOut(@time:1s,@offset:100%,@ease:ease-out,@fillmode:both)舞台

入场出场动画,默认位移100%自身位置。

See the Pen WRzbWj by iRuxu (@iRuxu) on CodePen.

.widthTo(@time:1s,@from:0,@to:100%,@ease:ease,@fillmode:forwards)宽度

宽度变化。

See the Pen NdYKZL by iRuxu (@iRuxu) on CodePen.

.heightTo(@time:1s,@from:0,@to:100%,@ease:ease,@fillmode:forwards)高度

高度变化。当未定义父级高度时,请勿使用百分比作为末尾高度。

See the Pen wgmvZL by iRuxu (@iRuxu) on CodePen.

.zoomTo(@time:1s,@from:1,@to:1.5,@ease:ease,@fillmode:forwards)缩放

缩放变化。

See the Pen zoomTo by iRuxu (@iRuxu) on CodePen.

.zoomIn / .zoomOut(@time:1s,@scale:0.3~1.8,@ease:ease-in-out,@fillmode:forwards)放大进入/离开

放大进入/离开。

See the Pen zoomIn/zoomOut by iRuxu (@iRuxu) on CodePen.

.rotateTo(@time:1s,@from:0,@to:180deg,@ease:ease-in-out,@fillmode:forwards) / .rotateRound(@time:1s,@count:1,@ease:ease-in-out,@fillmode:forwards)旋转

旋转角度,默认180度;旋转次数(360度),默认1次。

See the Pen rotateTo by iRuxu (@iRuxu) on CodePen.

.flipInX / .flipInY / .flipOutX / .flipOutY(@time:1s~0.75s)翻转

沿X或Y轴翻转进入离开。

See the Pen flip by iRuxu (@iRuxu) on CodePen.