CSS3 Animation

CSS3 动画手册

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

动画预览重置

显示方式： 2D 3D

透视: 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
过渡效果:

ease linear ease-in ease-out ease-in-out cubic-bezier(0.5,0.25,0.5,0.75)

动画预览查看代码重置

动画名称:
执行时间: s
延迟执行: s
执行次数: [infinite]无限循环
变形原点:
过渡效果:

ease ease-in ease-out ease-in-out linear cubic-bezier(0.5,0.25,0.5,0.75)
播放方向:

normal alternate
隐藏背景:

visible hidden
完成状态:

none forwards backwards both
动画状态:

none running paused
执行动画的属性:

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

以上实例来源于： https://daneden.me/animate/

您可以拖动自己的图片到这个区域

贝塞尔曲线工具

X