1,040
社区成员
发帖
与我相关
我的任务
分享前端CSS-过渡动画| “朝闻道”知识分享大赛
这是我参加朝闻道知识分享大赛的第25篇文章。
过渡动画（Transition）是 CSS 中的一种简单动画效果，它允许元素在属性发生变化时，进行平滑的过渡效果。过渡动画是为元素的状态变化（例如：颜色、大小、位置等）添加动画效果的理想选择。
1. 过渡动画的基本语法
transition 是 CSS 中的一个复合属性，用于定义元素属性变化时的过渡效果。
语法
selector {
transition: property duration timing-function delay;
}
-
property：要应用过渡效果的属性。例如
color、width、opacity等。 -
duration：过渡动画的持续时间，例如
0.3s、2s。 -
timing-function：动画的速度曲线，例如
ease、linear、ease-in、ease-out等。 -
delay：过渡动画开始前的延迟时间。
2. 常用的 transition 子属性
除了使用 transition 复合属性外，也可以分开定义过渡动画的各个子属性：
-
transition-property：指定要应用过渡效果的属性。 -
transition-duration：指定过渡效果的持续时间。 -
transition-timing-function：指定过渡的速度曲线。 -
transition-delay：指定过渡开始的延迟时间。
示例：分开定义各个子属性
.box {
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in-out;
transition-delay: 0.5s;
}
3. 按钮悬停颜色变化示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 过渡示例</title>
<style>
.button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #FF5722;
}
</style>
</head>
<body>
<button class="button">悬停我</button>
</body>
</html>
解释：
-
设置
transition: background-color 0.3s ease;，当按钮悬停时背景颜色在 0.3 秒内平滑地从绿色过渡到橙色。
4. transition-timing-function
transition-timing-function 定义了动画的速度曲线。常见的速度曲线有：
-
linear：匀速变化
-
ease：先快后慢
-
ease-in：慢速开始
-
ease-out：慢速结束
-
ease-in-out：慢速开始和结束
不同的速度曲线示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>速度曲线示例</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
margin: 10px;
transition: width 1s;
}
.linear:hover {
width: 200px;
transition-timing-function: linear;
}
.ease:hover {
width: 200px;
transition-timing-function: ease;
}
.ease-in:hover {
width: 200px;
transition-timing-function: ease-in;
}
.ease-out:hover {
width: 200px;
transition-timing-function: ease-out;
}
.ease-in-out:hover {
width: 200px;
transition-timing-function: ease-in-out;
}
</style>
</head>
<body>
<div class="box linear">linear</div>
<div class="box ease">ease</div>
<div class="box ease-in">ease-in</div>
<div class="box ease-out">ease-out</div>
<div class="box ease-in-out">ease-in-out</div>
</body>
</html>
解释：
-
transition-timing-function控制过渡的速度曲线，使得不同的盒子在悬停时呈现不同的动画速度效果。
...全文
请发表友善的回复…
发表回复
