数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究CSS 中使用多个属性的过渡简写？
我们可以使用 CSS 将过渡添加到 HTML 元素。在开始教程之前，让我们了解一下什么是过渡。基本上，过渡是一个元素从一个状态变化到另一个状态。例如，当用户将鼠标悬停在元素上时，我们更改元素的尺寸。
在 CSS 中，我们可以通过两种方式向元素添加过渡。第一种是将“transition-property”、“transition-duration”、“transition-timing-function”和“transition-delay”这四个属性一起使用。第二种是只使用“transition”CSS 属性。
CSS 的“transition”属性是下面这些 CSS 属性的简写。
Transition-property − 它指定需要应用过渡效果的 CSS 属性。如果需要对所有属性应用过渡，则可以使用“all”作为值。
Transition-duration − 它是过渡效果的总时间，以秒为单位。
Transition-timing-function − 它决定了过渡如何进行。过渡时序函数的示例包括“liner”、“ease-in”、“ease-out”、“ease-in-out”等。
Transition-delay − 它是过渡效果开始后的时间间隔。
语法
用户可以按照以下语法使用具有多个 CSS 属性的过渡简写。
element {
transition: Property duration timing-function delay;
}
在上述语法中，第一个值是过渡属性，第二个值是过渡持续时间，第三个值是时序函数，最后一个是过渡延迟。
示例 1
在下面的示例中，我们有一个 200 x 200 尺寸的 div 元素，并且我们为 div 元素的高度添加了过渡效果，持续时间为 2 秒。此处，过渡延迟为 0.5 秒，时序函数为“ease-in-out”。
用户可以将鼠标悬停在 div 元素上以观察过渡效果。我们可以观察到 div 元素的高度平滑增加，而不是立即增加。
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 500px;
height: 200px;
background-color: red;
color: white;
font-size: 25px;
transition: height 2s ease-in-out 0.5s;
}
.element:hover {
height: 400px;
background-color: green;
}
</style>
</head>
<body>
<h3>Using the <i> transition property </i> of CSS to add transition to the element</h3>
<div class = "element">
This div contains the texts.
<p> Hover over this div and wait to see the changes </p>
</div>
</body>
</html>
示例 2
在下面的示例中，div 元素的初始 margin-left 为 2px。当用户将鼠标悬停在 div 元素上时，我们将 margin-left 增加到 100px。我们在 div 元素的 margin-left CSS 属性上添加了过渡效果，持续时间为 2 秒，延迟 0.5 秒。
在输出中，将鼠标悬停在 div 元素上，它将在 2 秒内向右移动 100px。
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 25px;
margin-left: 2px;
border-radius: 12px;
transition: margin-left 2s ease-in-out 0.5s;
}
.element:hover {
margin-left: 100px;
}
</style>
</head>
<body>
<h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
<p> Hover over the below div and wait to see the changes. </p>
<div class = "element">
This div contains the texts.
</div>
</body>
</html>
示例 3
在下面的示例中，我们为多个 CSS 属性添加了过渡效果。在这里，我们为“margin-left”、“height”、“width”、“background-color”、“color”和“font-size”CSS 属性添加了 2 秒的过渡效果。
在输出中，用户可以观察到它对所有 CSS 属性都进行了平滑过渡。但是，我们可以使用“all”作为“transition-property”的值，以对所有属性添加过渡。
<html>
<head>
<style>
/* adding transition effect on the element */
.element {
width: 200px;
height: 200px;
background-color: blue;
color: white;
font-size: 25px;
margin-left: 2px;
border-radius: 12px;
transition: margin-left 2s, height 2s, width 2s, background-color 2s, color 2s, font-size 2s;
}
.element:hover {
margin-left: 100px;
height: 400px;
width: 400px;
background-color: aqua;
color: black;
font-size: 40px;
}
</style>
</head>
<body>
<h3> Using the <i> transition property </i> of CSS to add transition to the element </h3>
<p> Hover over the bellow div to see the achennges</p>
<div class = "element">
Square div element.
</div>
</body>
</html>
用户学习了如何使用“transition”CSS 属性，它是与过渡相关的多个 CSS 属性的简写。在这里，我们学习了如何在以上三个示例中使用“transition”CSS 属性。在最后一个示例中，我们为多个 CSS 属性添加了过渡效果。
585 次浏览
