如何用css transition属性设置简单动画

CSS的transition属性通过设置property、duration、timing-function和delay实现元素状态变化的平滑动画，如:hover时颜色渐变或尺寸缩放；可单独指定属性或使用all对多个属性应用过渡，并配合ease、linear等速度曲线控制动画节奏，提升交互体验。

CSS 的 transition 属性可以让元素在状态变化时实现平滑的动画效果，比如鼠标悬停时颜色渐变、按钮缩放等。它适合做简单的交互动画，不需要关键帧（keyframes），使用起来非常直观。

1. 基本语法和属性

transition 是一个复合属性，可以设置以下子属性：

• property：要过渡的 CSS 属性，如 width、color、opacity 等，用 all 表示所有可动画属性
• duration：过渡持续时间，单位是秒（s）或毫秒（ms）
• timing-function：过渡的速度曲线，如 ease、linear、ease-in-out
• delay：延迟多久开始动画

写法示例：

例如：

立即学习“前端免费学习笔记（深入）”；

2. 实现鼠标悬停动画

常见的用途是配合 :hover 实现视觉反馈。比如让按钮背景色缓慢变化：

当鼠标移到按钮上时，背景色会在 0.4 秒内平滑变深。

可画AI

Canva可画魔力工作室，一站式AI智能设计工具平台

158

查看详情

3. 多属性动画与 all 的使用

如果想让多个属性都有过渡效果，可以分别列出，或使用 all：

这里宽度、高度、背景色和旋转都会产生过渡动画。

4. 常用 timing-function 选项

控制动画节奏很重要。常用值有：

• ease：慢开始，快中间，慢结束（默认）
• linear：匀速进行
• ease-in：慢开始
• ease-out：慢结束
• ease-in-out：两端慢，中间快

例如让动画更自然：

基本上就这些。transition 不复杂但容易忽略细节，比如没设 duration 就不会动，或者属性不支持动画。掌握它能快速提升页面交互质感。

以上就是如何用css transition属性设置简单动画的详细内容，更多请关注php中文网其它相关文章！