当前位置：首页 > news >正文

CSS3 过渡

news 来源：原创 2024/9/21 22:43:36

CSS3 过渡（Transitions）是一种在属性值变化时创建平滑过渡效果的技术。通过过渡，你可以在 CSS 样式发生变化时，定义动画效果，使用户体验更加流畅和自然。

一基本概念

CSS3 过渡允许你在属性值变化时指定过渡的持续时间、速度曲线等，从而使样式的改变看起来更为平滑和渐进。

二主要属性

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

1. transition-property: 指定过渡的 CSS 属性。例如：color, width, background-color。

ransition-property 是 CSS3 中用来指定过渡效果应用到哪些 CSS 属性上的属性。它允许你明确指定要过渡的属性，从而在元素状态发生改变时仅对指定的属性应用过渡效果，而不是对所有属性都应用过渡效果。该属性的值可以是 CSS 属性的名称，也可以是关键字 all，表示对所有属性应用过渡效果。

语法

transition-property: none|all| property;

值	描述
none	没有属性会获得过渡效果。
all	所有属性都将获得过渡效果。
property	定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

如果你只想在颜色发生变化时应用过渡效果

transition-property: color;

如果想对所有属性都应用过渡效果

.element {transition-property: all;
}

2. transition-duration:

transition-duration 是 CSS3 中用来指定过渡效果持续时间的属性。它定义了过渡效果从开始到结束所花费的时间长度，可以使过渡效果更加平滑和自然。该属性的值可以是秒（s）或毫秒（ms），表示过渡效果的持续时间。可以使用小数值来定义更精确的持续时间。

如果你想让过渡效果持续 1 秒钟

transition-duration: 1s;

也可以在一个元素上同时应用多个过渡效果，并为每个过渡效果指定不同的持续时间。这可以通过逗号分隔的值来实现：

.element {transition-property: width, height, opacity;transition-duration: 0.5s, 1s, 0.3s;
}

3. transition-timing-function:

transition-timing-function 是 CSS3 中用来指定过渡效果的时间函数的属性。它定义了过渡效果在时间上的变化规律，控制了过渡效果的速度曲线，从而影响了元素从开始到结束过渡过程中的动画效果。

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-timing-function: ease-in-out;

4. transition-delay:

transition-delay 是 CSS3 中用来指定过渡效果延迟开始的时间的属性。它定义了在元素状态发生改变后，过渡效果开始应用的延迟时间，从而允许你控制过渡效果何时开始执行。

如果你想在状态改变后等待 0.5 秒后才开始过渡效果

transition-delay: 0.5s;

如果你想让过渡效果立即开始，而不希望有延迟，可以将值设为 0：

.element {transition-delay: 0s;
}

5. transition: 是以上四个属性的简写，可以一次性设置所有过渡相关的属性。

在一个例子中使用所有过渡属性：

div
{transition-property: width;transition-duration: 1s;transition-timing-function: linear;transition-delay: 2s;/* Safari */-webkit-transition-property:width;-webkit-transition-duration:1s;-webkit-transition-timing-function:linear;-webkit-transition-delay:2s;
}

简写

div
{transition: width 1s linear 2s;/* Safari */-webkit-transition:width 1s linear 2s;
}

三案例

鼠标悬停时，平滑地改变元素的背景色和宽度：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Transition Example</title>
<style>.box {width: 100px;height: 100px;background-color: blue;transition: width 0.5s ease, background-color 0.5s ease;}.box:hover {width: 200px;background-color: red;}
</style>
</head>
<body><div class="box"></div>
</body>
</html>

当 .box 元素被鼠标悬停时，它的宽度和背景颜色会在 0.5 秒内平滑地过渡到新的值。

悬浮卡片示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Card Effect Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body><div class="card"><h3>Card Title</h3><p>This is a description of the card.</p></div>
</body>
</html>

body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #e0e0e0;
}.card {width: 300px;padding: 20px;border-radius: 10px;background-color: white;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);transition: transform 0.3s ease, box-shadow 0.3s ease;text-align: center;
}.card:hover {transform: scale(1.05);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}