重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

因为专注,所以专业

如何为文本、图像、滚动和悬停添加 CSS 淡入过渡动画


引人入胜的网站有助于实现业务目标。面对如此多的普通消费者的注意力竞争,您需要找到脱颖而出的方法。
使用微妙的过渡动画效果是一种给网站访问者留下印象的方法。
几乎所有品牌都可以有效使用的一种流行的动画类型是淡入淡出过渡。这种风格效果允许您网站上的图像或文本逐渐出现或消失。
您可以将此样式用于文本、图像、滚动或悬停。以下是我们将在下面讨论的选项:

淡入动画的影响是强大的。值得庆幸的是,使用级联样式表 (CSS)实现起来相当容易——这是一种用于增强网站外观的编码语言。

CSS 淡入淡出过渡

CSS 淡入淡出过渡是一种样式效果,其中元素(如图像、文本或背景)在页面上逐渐出现或消失。 
要创建这些效果,您将使用 CSS 中的 transition 或 animation 属性。使用 transition 属性时,您只能指定初始状态和最终状态 - 而不能指定任何中间点。例如,您可以将 div 元素设置为从红色过渡到紫色。但是要指定 div 从红色变为蓝色到紫色到粉红色,您需要使用动画属性。 
CSS 过渡也需要触发器——就像访客悬停在元素上一样——而动画则不需要。默认情况下,动画将在页面加载时自动开始其序列。不过,您可以使用animation-delay 属性延迟其开始时间。 
您可以在下面的示例中看到过渡和动画属性是如何使用的。
您还可以查看CSS 动画和过渡之间的主要区别以了解更多信息。
就像电影中的淡入淡出过渡一样,CSS 淡入淡出过渡和动画在某些网站上比其他网站效果更好。让我们看看您使用这种风格效果的一些原因。

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

向您的网站添加 CSS 动画不应该是事后的想法。您不希望它只是为了向您的网站添加一些闪存而将其投入混合的东西。
相反,每个设计选择都必须根据它对用户体验 (UX) 的贡献(或减损)来证明其合理性。
所以考虑一下:由于动画涉及运动,因此几乎不可能忽略这种类型的设计。由于其视觉突出,您需要在设计网站的早期阶段考虑如何实施它。
网站动画的目的超越了美学。动画可用于改善网站的流程并创建更具吸引力的用户界面 (UI)
淡入动画只是您可以在网站上实施的多种动画类型之一。有悬停动画加载动画和许多其他动画示例。但淡入动画尤其提供了很大的灵活性:您可以创建图像淡入淡出、文本淡入淡出、悬停淡入淡出、滚动淡入淡出和背景淡入淡出。 
下面我们将逐一介绍每个示例。 

使用 CSS 的淡入图像过渡

淡入动画最流行的用途之一是与图像结合使用。在这些情况下,图像将从透明变为完全不透明。在深入示例之前,让我们快速浏览一下 CSS opacity 属性。

CSS 过渡不透明度

CSS opacity 属性用于指定元素的不透明或透明程度。此属性的值范围为 0 到 1,0 表示完全透明,1 表示完全不透明。
当与 animation 或 transition 属性结合使用时,您可以使用 opacity 属性使元素在一段时间内从完全透明变为完全不透明(反之亦然)。
当从完全透明过渡到完全不透明时,元素会逐渐出现在页面上。这就是所谓的淡入动画。 
使用 css 不透明度淡入图像过渡的示例
这是实现此目的的代码示例:
 
在此代码中,您可以调整多个变量以创建所需的结果。
您可以首先调整动画属性(当前设置为 5 秒)到您想要的任何时间。
您还会注意到“-webkit”、“-moz”、“ -o ”和“-ms” ——它们是供应商前缀属性。这些属性使您的淡入动画代码可以跨各种浏览器和渲染引擎工作。
例如,“-webkit”适用于 Chrome、Safari 和几乎所有 iOS 浏览器。
通过包含图像的元素中使用淡入图像CSS 类,您可以继续将此 CSS 代码与其他图像重用。

使用 CSS 的淡入文本过渡

您可以使用上面共享的相同 CSS 属性,只需稍作更改即可创建文本淡入效果。
使用css淡入文本过渡这是要添加到 CSS 的代码:
 
此代码与用于实现图像淡入动画效果的代码之间的主要区别在于它包含文本属性,例如字体大小、字体系列和颜色。
要以这种方式设置样式的任何 HTML 元素上使用淡入文本。 

悬停时的 CSS 淡入过渡

融入淡入动画效果的一种更具交互性的方式涉及悬停功能。这可以应用于文本或图像。
例如,您可以将图像设置为从 50% 的不透明度开始,并在用户将鼠标悬停在其上方的两秒钟内增加到 100% 的不透明度。
悬停时的 CSS 淡入过渡示例
使用此 CSS 代码:
 

滚动上的 CSS 淡入过渡

使用带有滚动的淡入动画稍微复杂一些,因为您还必须使用 JavaScript。
JavaScript 将注册滚动,触发 CSS 来调整动画。
滚动上的 css 淡入过渡示例
代码的 CSS 部分应该类似于Staffan Adolfsson 在 CodePen 上共享的代码:
 
对于 JavaScript 方面,您需要插入以下代码:
 

CSS 淡入淡出背景过渡

您可以创建不需要用户向下滚动页面或您编写 JavaScript 的淡入淡出背景颜色过渡效果。相反,您将使用 CSS 动画属性来设置 body 元素的样式。
例如,您可以将背景设置为在 6 秒内从浅黄色过渡到深绿色,然后重新开始并重复。 
从黄色到绿色的 css 淡入淡出背景过渡示例
这是您将使用的 CSS 代码:
 

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

淡入动画可以成为讲述有意义的故事和提高参与度的强大工具。但是不要仅仅为了使用动画而向您的网站添加不必要的动画。
专注于使用淡入动画来突出某些元素并创建更平滑的过渡,以及改善网站的整体用户体验。