CSS为文本添加fade-in淡入动画效果
作者:admin 时间:2022-8-8 19:34:14 浏览:在上文中，介绍了css实现图片fade-in淡入动画效果，本文将给大家介绍如何用CSS为文本添加fade-in淡入过渡效果。
CSS 允许你在 text 上添加淡入动画，它类似于它在图像上的工作方式，只是你现在在 CSS 中创建文本淡入淡出。
例子
假设现在你想在网站的登录页面上添加一条带有淡入效果的欢迎信息，你可以通过首先为消息创建 HTML 来完成此操作，如下所示：
<body>
<h1 id="text-fade-in"> 你好！卡卡网 </h1>
</body>
现在为文本添加淡入过渡，CSS 代码：
#text-fade-in {
background: orange;
display: inline-block;
color: blue;
font-family: Arial, sans-serif, helvetica;
animation: fadeIn linear 3s;
-webkit-animation: fadeIn linear 3s;
-moz-animation: fadeIn linear 3s;
-o-animation: fadeIn linear 3s;
-ms-animation: fadeIn linear 3s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}动画属性
在 CSS 中，当你将动画属性与@keyframes 规则结合使用时，你将获得在页面加载时发生的淡入动画。动画属性允许你在设定的时间段内将元素的样式更改为另一种样式。
在 CSS 中，动画属性是这些属性的简写：
- 动画名称 animation-name
- 动画持续时间 animation-duration
- 动画延迟 animation-delay
- 动画方向 animation-direction
- 动画迭代计数 animation-iteration-count
- 动画速度类型 animation-timing-function
要创建淡入效果，可以使用动画属性指定动画名称和动画持续时间，详细了解 CSS3 animation 6个动画属性。
动画属性的语法
Element
{
animation: value;
}
该值表示有效的 CSS 值，如fadeIn。
本实例中，animation: fadeIn linear 3s; 动画名称是fadeIn，它绑定到选择器的 keyframe 名称，linear是动画类型（匀速），动画类型除了linear，还有ease、ease-in、ease-out、ease-in-out，一图理解animation属性linear/ease/ease-in/ease-out/ease-in-out，3s是动画持续时间。
@Keyframes 规则
示例中，使用了@Keyframes 规则创建淡入动画效果。
使用@keyframes 规则，你可以逐渐更改所选元素的样式。这就是你可以在 CSS 中创建动画的方式。为此，请在 @keyframes 规则中使用动画名称的属性值。
这样，你就可以选择适用于渐变样式的动画。在@keyframes规则中，你可以在应用样式时使用“from”和“to”等选择器。请记住，“from”和“to”选择器与 0% 和 100% 相同。
你使用“from”选择器应用的样式将逐渐更改为你使用“to”选择器应用的样式。请记住，更改将在你为动画持续时间属性指定的时间段内发生。
有了这些，你可以通过使用 @keyframes 规则选择器将元素的不透明度从0更改为1，轻松创建动画 CSS 的淡入淡出。
@keyframes 规则的语法
@keyframes animation-name
{
keyframes-selector
{
/* CSS 样式 */
}
}
相关文章
- 站长推荐
