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：延迟多久开始动画
写法示例：
pre { transition: property duration timing-function delay;}
例如：
立即学习“前端免费学习笔记（深入）”；
pre { transition: background-color 0.3s ease 0.1s;}
2. 实现鼠标悬停动画
常见的用途是配合 :hover 实现视觉反馈。比如让按钮背景色缓慢变化：
pre {.button { background-color: #007bff; color: white; padding: 10px 20px; border: none; transition: background-color 0.4s ease;}.button:hover { background-color: #0056b3;}}
当鼠标移到按钮上时，背景色会在 0.4 秒内平滑变深。
稿定抠图
AI自动消除图片背景
76 查看详情
3. 多属性动画与 all 的使用
如果想让多个属性都有过渡效果，可以分别列出，或使用 all：
pre {.box { width: 100px; height: 100px; background: red; transition: all 0.5s ease;}.box:hover { width: 150px; height: 150px; background: blue; transform: rotate(15deg);}}
这里宽度、高度、背景色和旋转都会产生过渡动画。
4. 常用 timing-function 选项
控制动画节奏很重要。常用值有：
ease：慢开始，快中间，慢结束（默认） linear：匀速进行 ease-in：慢开始 ease-out：慢结束 ease-in-out：两端慢，中间快
例如让动画更自然：
pre {transition: transform 0.3s ease-in-out;}
基本上就这些。transition 不复杂但容易忽略细节，比如没设 duration 就不会动，或者属性不支持动画。掌握它能快速提升页面交互质感。
以上就是如何用css transition属性设置简单动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1026223.html
微信扫一扫 
支付宝扫一扫 
