CSS3贝塞尔动画曲线在线编辑工具 - 可视化动画缓动函数生成器

贝塞尔曲线编辑器
拖拽控制点调整曲线
动画预览
CSS代码
cubic-bezier(0.25, 0.1, 0.75, 0.9)
animation: slideAnimation 2s cubic-bezier(0.25, 0.1, 0.75, 0.9) 0s 1 none;
.animated-element {
animation: slideAnimation 2s cubic-bezier(0.25, 0.1, 0.75, 0.9) 0s 1 none;
}

@keyframes slideAnimation {
from { transform: translateX(0); }
to { transform: translateX(300px); }
}
使用说明
贝塞尔曲线
  • 控制点: 拖拽红色圆点调整曲线形状
  • 数值输入: 精确设置控制点坐标
  • 预设曲线: 快速应用常用的缓动效果
动画预览
  • 实时预览: 立即查看曲线的动画效果
  • 持续时间: 调整动画播放速度
  • 重复模式: 设置动画循环次数
CSS代码
  • 函数格式: 标准cubic-bezier()函数
  • 动画属性: 完整的CSS animation属性
  • 关键帧: 可选的@keyframes规则
实用技巧
  • 拖拽编辑: 直观调整曲线参数
  • 一键复制: 快速获取CSS代码
  • 实时同步: 编辑器与代码实时同步