如何添加一个CSS淡入过渡动画到你的文本，图像，滚动和悬停

动画-何时完成正确的-给网站带来活力，增加用户粘性。

完成后错误的,这是令人恶心的。

一个吸引人的网站有助于实现商业目标。要想吸引普通消费者的注意，你必须想办法脱颖而出。

使用微妙的过渡动画效果是给访问者留下印象的一种方法。

一种流行的动画类型，几乎可以被任何品牌有效地使用褪色过渡。这种风格的效果允许你网站上的图像或文本逐渐出现或消失。

你可以使用这种样式的文字，图像，滚动，或悬停。以下是我们将在下面讨论的选项:

• 淡入图像过渡
• 淡入文本转换
• 淡入悬停动画
• 淡入滚动动画
• 褪色的背景过渡

淡入动画的影响是强大的。值得庆幸的是，它的实现相当容易层叠样式表(CSS)-一种用来增强网站外观的编码语言。

CSS褪色过渡

CSS渐变过渡是一种风格效果，其中一个元素(如图像、文本或背景)在页面上逐渐出现或消失。

为了创建这些效果，你将使用CSS中的过渡或动画属性。当使用transition属性时，您将只能指定初始状态和最终状态—而不能指定任何中间点。例如，可以将div元素设置为从红色转换为紫色。但是要指定从红色到蓝色、紫色到粉色的div，您需要使用animation属性。

CSS转换也需要触发器——就像访问者悬停在元素上一样——而动画不需要。默认情况下，当页面加载时，动画将自动开始它的序列。不过，您可以使用animation-delay财产。

你可以在下面的例子中看到如何使用过渡和动画属性。

你也可以退房CSS动画和过渡的主要区别要学习更多的知识。

就像电影中的渐变过渡， CSS淡入过渡和动画在一些网站上比其他网站更好。让我们看看你使用这种风格效果的一些原因。

为什么要添加淡入动画到你的网站?

添加CSS动画到你的网站不应该是事后才想到的。你不希望它只是为了给你的网站增加一些亮点而加入其中。

相反地，每一个设计选择都必须根据它对设计的贡献(或减损)来证明其合理性用户体验(UX)。

所以考虑一下:因为动画包含了移动，所以我们几乎不可能忽视这类设计。由于它在视觉上的突出性，当你在设计网站的早期阶段时，你需要考虑如何实现它。

网站动画的目的不仅仅是为了美观。动画可以用来改善你的网站的流量，创造一个更吸引人的网站用户界面(UI)。

淡入动画只是你可以在你的网站上实现的多种动画类型之一。有盘旋的动画,加载动画，以及其他几十个动画的例子。尤其是淡入动画，它提供了大量的灵活性:您可以创建图像淡入、文本淡入、悬停淡入、滚动淡入和背景淡入。

下面我们将分别介绍这两种方法的一个示例。

使用CSS淡入图像转换

淡入动画最流行的应用之一是与图像结合使用。在这些情况下，图像将从透明变为完全不透明。在深入这个例子之前，让我们快速地看一下CSS不透明度属性。

CSS过渡不透明度

CSS不透明度属性用于指定元素的不透明程度。此属性的值范围为0到1,0表示完全透明，1表示完全不透明。

当与动画或过渡属性相结合时，您可以使用不透明度属性在一段时间内使一个元素从完全透明变为完全不透明(反之亦然)。

当从完全透明过渡到完全不透明时，该元素将逐渐出现在页面上。这叫做淡入动画。

下面是一个代码示例:

看到这支笔oNBoGbp安德里亚·菲茨杰拉德(@afitzgerald53)CodePen。

在这段代码中，您可以调整几个变量来创建所需的结果。

第一个你可以调整的是动画属性(目前设置为5秒)到任何你想要的时间。

您还会注意到"-webkit"， "-moz"， "-o"和"-ms"-它们是供应商前缀属性。这些属性使你的淡入动画代码可以在不同的浏览器和渲染引擎上工作。

例如,“webkit”适用于Chrome、Safari和几乎所有的iOS浏览器。

可以在其他图像中重用这些CSS代码fade-in-image在包含图像的元素中的CSS类。

使用CSS淡入文本转换

您可以使用与上面相同的CSS属性，只需稍加修改就可以创建一个文本淡入效果。

下面是要添加到CSS中的代码:

看到这支笔使用CSS淡入文本转换安德里亚·菲茨杰拉德(@afitzgerald53)CodePen。

此代码与用于实现图像淡入动画效果的代码的主要区别在于，它包含了文本属性，如字体大小、字体系列和颜色。

使用fade-in-text类在任何HTML元素上，您都希望以这种方式设置样式。

悬停时淡入过渡

一种更具互动性的方式来合并淡入动画效果包括悬停功能。这可以应用于文本或图像。

例如，您可以将图像的不透明度设置为50%，当用户悬停在其上方时，在两秒内将不透明度提高到100%。

使用以下CSS代码:

看到这支笔悬停时淡入过渡安德里亚·菲茨杰拉德(@afitzgerald53)CodePen。

CSS淡入过渡滚动

使用带有滚动的淡入动画有点复杂，因为您还必须使用JavaScript。

JavaScript将注册滚动，触发CSS来调整动画。

代码的CSS部分应该类似于以下代码斯塔凡AdolfssonCodePen:

看到这支笔淡入滚动斯塔凡·阿道夫松(@staffan-ad)CodePen。

对于JavaScript方面，你需要插入以下代码:

看到这支笔淡入滚动斯塔凡·阿道夫松(@staffan-ad)CodePen。

渐变背景转换

您可以创建一个淡出的背景颜色过渡效果，而不需要用户向下滚动页面或您编写JavaScript。相反，您可以使用CSS animation属性来设置body元素的样式。

例如，您可以将背景设置为在6秒的时间内从浅黄色过渡到深绿色，然后让它重新开始并重复。

下面是你会用到的CSS代码:

看到这支笔渐变背景转换安德里亚·菲茨杰拉德(@afitzgerald53)CodePen。

在你的网站上创建淡入动画

淡入动画是讲述有意义故事和提高用户粘性的强大工具。但是不要为了使用动画而在你的网站上添加不必要的动画。

重点是使用淡入动画来突出某些元素，并创建更流畅的过渡，以及改善网站的整体用户体验。

编者按:这篇文章最初发表于2020年2月，现已更新为全面性。