首页 > 文章 > 前端

CSS过渡动画快速入门教程

时间：2025-11-13 09:31:28 303浏览收藏

文章不知道大家是否熟悉？今天我将给大家介绍《CSS transition简单动画设置教程》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

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

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

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 秒内平滑变深。

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过渡动画快速入门教程》的详细内容，更多关于的资料请关注golang学习网公众号！