CSS3Animation

变形 & 过渡
自定义动画
动画库

动画预览重置仿制代码

显现方法：2D3D

透视: px
旋转: deg
X轴旋转: deg
Y轴旋转: deg
Z轴旋转: deg
X轴缩放: 倍
Y轴缩放: 倍
Z轴缩放: 倍
X轴位移: px
Y轴位移: px
Z轴位移: px
X轴歪斜: deg
Y轴歪斜: deg
矩阵变形-matrix(a,c,e,b,d,f)c,e值用正弦或余弦值表明
- 参数a:
- 参数c:
- 参数e:
- 参数b:
- 参数d:
- 参数f:
变形原点:

过渡特点:
过渡时刻: s
推迟时刻: s
过渡作用:

easelinearease-inease-outease-in-outcubic-bezier(0.5,0.25,0.5,0.75)

动画预览检查代码重置

动画称号:
履行时刻: s
推迟履行: s
履行次数: [infinite]无限循环
变形原点:
过渡作用:

easeease-inease-outease-in-outlinearcubic-bezier(0.5,0.25,0.5,0.75)
播映方向:

normalalternate
躲藏布景:

visiblehidden
完结状况:

noneforwardsbackwardsboth
动画状况:

nonerunningpaused
履行动画的特点:

width height top left background border-radius rotate rotateX rotateY rotateZ scaleX scaleY translateX translateY translateZ skewX skewY perspective opacity

特点：单位：增加

检查代码

根本作用

闪光灯弹起摇晃秋千 swing 张狂摇摆脉冲

翻转

翻转 X轴淡入 X轴淡出 Y轴淡入 Y轴淡出

淡入作用

淡入下方淡入上方淡入左面淡入右边淡入底部淡入顶部淡入页面左面淡入页面右边淡入

淡出作用

淡出向上淡出向下淡出向左淡出向右淡出顶部淡出底部淡出页面左面淡出页面右边淡出

弹跳进入作用

bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight

弹跳退出作用

bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight

旋转进入作用

rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight

旋转退出作用

rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight

特效

hinge rollIn rollOut

以上实例来源于：

能够拖动自己的图片到这个区域

贝塞尔曲线东西

封闭

X

仿制代码