大家好，我是顺亿，今天我们来聊聊CSS过渡动画。是不是经常觉得CSS动画复杂难懂？别担心，今天这篇文章，我就用最简单的方式，带你彻底搞懂CSS过渡动画！读完这篇文章，你将能够：
- 掌握CSS过渡动画的基本语法和用法
- 了解哪些属性可以参与过渡，哪些不可以
- 学会如何定义多个过渡动画和过渡的四个小属性
- 了解时间函数和贝塞尔曲线的应用
- 通过实战案例，学会如何制作实用的CSS过渡动画
什么是过渡动画？
CSS过渡动画，简单来说，就是让元素从一个状态平滑过渡到另一个状态。比如，让一个元素的宽度从100px平滑过渡到200px，中间的状态会自动添加“补间动画”。
CSS过渡动画基本语法
transition: transition-property transition-duration [transition-timing-function] [transition-delay];其中，transition-property指定要过渡的CSS属性，transition-duration指定动画持续时间，transition-timing-function指定动画速度曲线，transition-delay指定动画延迟时间。
实战案例：鼠标滑动，背景从透明到半透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto 0px;
}
.box img {
width: 200px;
height: 200px;
object-fit: cover;
}
.box::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0);
transition: background-color 1s ease;
}
.box:hover::after {
background-color: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>这个例子中，我们通过:hover伪类，让鼠标悬停在.box元素上时，背景颜色从透明变为半透明。
总结
CSS过渡动画是一种非常实用的技术，可以让你的网页更加生动有趣。通过本文的学习，相信你已经对CSS过渡动画有了更深入的了解。如果你还有其他问题，欢迎在评论区留言交流。
我是顺亿，如果你喜欢我的文章，请关注「趣航编程网」（www.vqhf.com），获取更多精彩内容。