CSS 过渡或动画能否在页面加载时为文本创建淡入效果？

使用 CSS 在页面加载时使文本段落淡入动画

问题：

是否可以利用 CSS 过渡来创建文本段落与页面的淡入效果

说明：

CSS 过渡允许元素在指定时间段内从一种样式平滑过渡到另一种样式。该属性可以应用于 opacity 属性，实现淡入效果。

方法一：CSS 动画

对于自调用过渡，CSS 动画更适合。它们提供了专门为此目的而设计的专用动画语法。

#test p {
  margin-top: 25px;
  font-size: 21px;
  text-align: center;

  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

浏览器支持：

• 所有现代浏览器
• Internet Explorer 10

方法 2：使用 Class 进行 CSS 转换Toggle

或者，可以使用类切换来触发 CSS 转换：

#test p {
  opacity: 0;
  font-size: 21px;
  margin-top: 25px;
  text-align: center;

  transition: opacity 2s ease-in;
}

#test p.load {
  opacity: 1;
}

$("#test p").addClass("load");

浏览器支持：

• 全部现代浏览器
• Internet Explorer 10

方法 3：使用 jQuery 进行动画

为了跨浏览器兼容性，可以使用 jQuery 来动画不透明度变化：

$("#test p").delay(1000).animate({ opacity: 1 }, 700);

。邮件方法：

[DotmailApp](http://dotmailapp.com/) 使用类似的方法，只是稍微延迟一下，以增强效果。然而，该技术需要具有更广泛浏览器支持的 jQuery 2.x。

以上是CSS 过渡或动画能否在页面加载时为文本创建淡入效果？的详细内容。更多信息请关注PHP中文网其他相关文章！