CSS Transition Generator
Configure CSS transitions with hover preview.
过渡 1
悬停于我
.element {
transition: all 0.3s ease 0s;
}
.element:hover {
/* apply your hover styles here */
}关于本工具
CSS过渡生成器允许您通过设置目标属性、持续时间、时间函数和延迟来配置transition简写属性。交互式预览让您在复制代码前查看过渡效果。
CSS过渡通过:hover、:focus等伪类或JavaScript类变化触发，在两个CSS值之间创建平滑的状态变化。与动画不同，过渡需要触发事件。
使用方法
- 选择要过渡的CSS属性（或使用all）。
- 设置持续时间——过渡需要多长时间（如0.3s）。
- 选择控制加速曲线的时间函数。
- 可选地在过渡开始前添加延迟。
- 将鼠标悬停在预览框上查看实时效果，然后复制CSS。
使用场景
开发者将过渡用于按钮悬停效果、卡片放大和导航链接的颜色变化。表单设计师用于输入焦点样式，侧边栏组件用于滑入/滑出效果。
常见问题
- transition和animation有什么区别？ — 过渡对状态变化（如悬停）做出反应；动画使用关键帧自动或循环运行。
- 可以过渡多个属性吗？ — 可以。点击"添加过渡"可以添加多个以逗号分隔的属性规则。
- 哪些属性可以过渡？ — 大多数具有数值的属性（opacity、color、transform、尺寸等）都可以过渡。display等属性不能过渡。