我们可以使用 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”。
这本书并不是一本语言参考书，但它是一个Android开发者去学习Kotlin并且使用在自己项目中的一个工具。我会通过使用一些语言特性和有趣的工具和库来解决很多我们在日常生活当中都会遇到的典型问题。 这本书是非常具有实践性的，所以我建议你在电脑面前跟着我的例子和代码实践。无论何时你都可以在有一些想法的时候深入到实践中去。 这本书适合你吗？ 写这本书是为了帮助那些有兴趣 使用Kotlin语言来进行开发的Android开发者。 如果你符合下面这些情况，那这本书是适合你的： 你有相关Android开发和Andro
用户可以将鼠标悬停在 div 元素上来观察过渡效果。我们可以观察到 div 元素的高度是平滑增加的，而不是立即增加的。
Using the transition property of CSS to add transition to the element
This div contains the texts.Hover over this div and wait to see the changes
示例 2
在下面的示例中，div 元素的初始 margin-left 为 2px。当用户将鼠标悬停在 div 元素上时，我们将 margin-left 增加到 100px。我们在 div 元素的 margin-left CSS 属性上添加了延迟 0.5 秒后持续 2 秒的过渡效果。
在输出中，将鼠标悬停在 div 元素上，该元素将在 2 秒内向右移动 100px。
Using the transition property of CSS to add transition to the element
Hover over the below div and wait to see the changes.
This div contains the texts.
示例 3
在下面的示例中，我们为多个 CSS 属性添加了过渡效果。在这里，我们为“margin-left”、“height”、“width”、“background-color”、“color”和“font-size”CSS属性添加了2秒的过渡效果。
在输出中，用户可以观察到所有 CSS 属性的过渡都很平滑。但是，我们可以使用“all”作为“transition-property”的值来向所有属性添加过渡。
Using the transition property of CSS to add transition to the element
Hover over the bellow div to see the achennges
Square div element.
用户学会了使用“transition”CSS 属性，这是与过渡相关的多个 CSS 属性的简写。在这里，我们已经学会了在上面的三个示例中使用“transition”CSS属性。在上一个示例中，我们为多个 CSS 属性添加了过渡效果。
