Css 简明教程
CSS - transition Property
CSS transition 属性允许您在指定持续时间内对元素的 style 属性进行动画更改。它提供了一种简单高效的方式来为 Web 元素添加动画，而无需复杂的 JavaScript 代码或外部库。
CSS transition 属性是以下内容的速记属性：
-
transition-behavior （此属性是实验性的，可能不受支持）。
Possible Values
-
* <length>* − 特定的长度值，如像素 (px)、厘米 (cm)、英寸 (in) 等。
Syntax
transition: margin-right 4s;
transition: margin-right 4s 1s;
transition: margin-right 4s ease-in-out;
transition: margin-right 4s ease-in-out 1s;
transition: display 4s allow-discrete;
transition: margin-right 4s, color 1s;transtion 属性的值定义为以下之一：
-
none 值表示此元素不会有转换。这是默认值。
-
逗号用于分隔一个或多个单属性转换。
单属性转换指定一个特定属性或所有属性的转换。这包括：
-
一个或零个值，表示应应用转换的属性或属性。这可以指定为：表示单个属性的 * <custom-ident>* 。转换中的 all 值表示当元素更改其状态时，转换将应用于所有发生更改的属性如果未指定任何值，则假定使用 all 值，并且转换将应用于所有更改的属性。
-
指定零或一个 * <easing-function>* 值，表示要使用的缓动函数。
-
为 transition 属性指定零、一或两个 * <time>* 值。解析后的第一个时间值应用于 * transition-duration* ，第二个值分配给 * transition-delay* 。
-
如果某个属性具有离散动画行为，则零或一个值表示是否启动转换。如果存在此值，它可以是 allow-discrete 或 normal 关键字。
CSS transition - With Two Values
以下示例演示了使用 padding 属性将转换应用于 2s 持续时间。将鼠标悬停在方框上后，边距增大到 15px 并且背景颜色更改为 greenyellow −
<html>
<head>
<style>
.box {
font-size: 14px;
width: 100px;
padding: 5px;
transition: padding 2s;
background-color: lightskyblue;
}
.box:hover {
background-color: greenyellow;
padding: 15px;
}
</style>
</head>
<body>
<div class="box">Hover over me</div>
</body>
</html>CSS transition - delay Value
以下示例演示了使用 padding 属性将转换应用于 padding 属性。转换在 2s 之后完成，并且在延迟 0.5s 之后开始 −
<html>
<head>
<style>
.box {
font-size: 14px;
width: 100px;
padding: 5px;
transition: padding 2s .5s;
background-color: lightskyblue;
}
.box:hover {
background-color: greenyellow;
padding: 15px;
}
</style>
</head>
<body>
<div class="box">Hover over me</div>
</body>
</html>CSS transition - easing Function
以下示例演示了使用 background-color 属性将转换应用于 background-color 属性。将鼠标悬停在方框上后，背景颜色变为绿黄色，开始平滑颜色转换，持续时间为 4s ，缓动函数为 ease-in-out −
<html>
<head>
<style>
.box {
font-size: 14px;
width: 100px;
padding: 15px;
transition: background-color 4s ease-in-out;
background-color: lightskyblue;
}
.box:hover {
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box">Hover over me</div>
</body>
</html>CSS transition - easing Function and delay
以下示例演示了使用 padding 属性将转换应用于 padding 属性。将鼠标悬停在方框上后，背景颜色变为绿黄色并且边距增加到 15px，开始平滑转换，持续时间为 4s ，缓动函数为 ease-in-out ，延迟时间为 0.7s −
<html>
<head>
<style>
.box {
font-size: 14px;
width: 100px;
padding: 5px;
transition: padding 4s ease-in-out 0.7s;
background-color: lightskyblue;
}
.box:hover {
background-color: greenyellow;
padding: 15px;
}
</style>
</head>
<body>
<div class="box">Hover over me</div>
</body>
</html>CSS transition - behavior Value
以下示例演示了如何在 background-color 属性上应用转换。当您将鼠标悬停在框上时，背景颜色变为绿黄色，通过 allow-discrete 计时函数在 5s 持续时间内开始平稳过渡 -
<html>
<head>
<style>
.box {
font-size: 14px;
width: 100px;
padding: 10px;
transition: background-color 5s allow-discrete;
background-color: lightskyblue;
}
.box:hover {
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="box">Hover over me</div>
</body>
</html>CSS transition - Applied To Two Properties
以下示例演示了如何将转换应用于 2s 中的文本颜色和 4s 中的 margin-left 。文本颜色将在 2s 中转换，而左边界将采用 4s -
<html>
<head>
<style>
.box {
font-size: 14px;
width: 100px;
padding: 10px;
transition: color 2s, margin-left 4s;
background-color: lightskyblue;
}
.box:hover {
color: red;
margin-left: 70px;
}
</style>
</head>
<body>
<div class="box">Hover over me</div>
</body>
</html>