Css 简明教程
CSS - transition Property
CSS transition 属性允许您在指定持续时间内对元素的 style 属性进行动画更改。它提供了一种简单高效的方式来为 Web 元素添加动画，而无需复杂的 JavaScript 代码或外部库。
CSS transition property allows you to animate changes in an element’s style properties over a specified duration. They provide a simple and efficient way to add animations to web elements without the need for complex JavaScript code or external libraries.
CSS transition 属性是以下内容的速记属性：
CSS transition property is a shorthand property for
-
transition-behavior (This property is on an experimental basis and may not be supported).
Possible Values
-
<length> − A specific length value such as pixels (px), centimeters (cm), inches (in), etc.
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 属性的值定义为以下之一：
The value for the transition property is defined as one of the following:
-
The none value indicates that there will be no transitions on this element. This is the default value.
-
Commas are used to separate one or more single-property transitions.
单属性转换指定一个特定属性或所有属性的转换。这包括：
A single-property transition specifies the transition for one specific property or all properties. This includes:
-
A zero or one value indicating the property or properties for which the transition should be applied. This can be specified as: A <custom-ident> representing a single property. The all value in transitions indicates that the transition will be applied to all attributes that change when the element changes its state If no value is specified, all value will be assumed, and the transition will apply to all changing properties.
-
Specify zero or one <easing-function> value indicating the easing function to be used.
-
Specify zero, one, or two <time> values for transition properties. The first parsed-time value is applied to transition-duration, and the second is assigned to transition-delay.
-
If a property has discrete animation behaviour, a zero or one value indicates whether to initiate transitions. If the value is present, it can be either allow-discrete or normal keyword.
CSS transition - With Two Values
以下示例演示了使用 padding 属性将转换应用于 2s 持续时间。将鼠标悬停在方框上后，边距增大到 15px 并且背景颜色更改为 greenyellow −
The following example demonstrates that transition is applied to the padding property with a duration of 2s. When you hover over the box, padding increases to 15px and the background color changes to 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 之后开始 −
The following example demonstrates that transition is applied to the padding property. The transition takes 2s to complete, and it starts after a delay of 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 −
The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth color transition with an ease-in-out timing function over the 4s duration −
<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 −
The following example demonstrates that transition is applied to the padding property. When you hover over the box, background color changes to green-yellow and padding increases to 15px, starting a smooth transition over the duration of 4s with an ease-in-out timing function and a delay of 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 持续时间内开始平稳过渡 -
The following example demonstrates that transition is applied to the background-color property. When you hover over the box, background color changes to green-yellow, starting a smooth transition over the duration of 5s using the allow-discrete timing function −
<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 -
The following example demonstrates that transition will be applied on text color in 2s and on margin-left in 4s. The text color will transition in 2s, while the left margin will take 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>CSS transition - Related Properties
以下是与转换相关的 CSS 属性列表：
Following is the list of CSS properties related to transition:
property |
value |
Determines the amount of time to wait before starting a transition effect when a property’s value changes. |
|
Determines amount of time that a transition animation should take to complete. |
|
Specifies which CSS properties should have a transition effect applied. |
|
Determines which intermediate values are generated for CSS properties affected by a transition effect. |