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.