Web 页面如何在加载时使用 css3 过渡动画？

1 年前提问

6 个月前修改

浏览次数120次

6个答案

要在页面加载过程中使用 CSS3 过渡动画，你可以通过以下步骤实现：

定义 CSS 过渡样式规则：在CSS中为目标元素创建初始状态和过渡效果。例如，你可能想让一个元素从透明度为0变化到透明度为1，以实现淡入效果。
设置初始状态：通过在页面的<style>标签或外部 CSS 文件中设置目标元素的样式，为其赋予初始状态（比如 opacity: 0;）。
设置过渡效果：使用 transition 属性来定义过渡效果的持续时间和效果曲线。
触发过渡：页面加载时，通过 JavaScript 或者在DOM中添加一个类（class）来改变目标元素的状态，触发CSS过渡效果。

下面是一个简单的示例：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Load Transition Example</title>
<style>
/* 初始状态，元素不可见 */
.element {
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

/* 页面加载后的状态，元素逐渐变得可见 */
.element.loaded {
  opacity: 1;
}
</style>
</head>
<body>
<div class="element">Hello, World!</div>

<script>
window.addEventListener('DOMContentLoaded', (event) => {
  // 一旦DOM加载完成，给元素添加 'loaded' 类来触发过渡
  document.querySelector('.element').classList.add('loaded');
});
</script>
</body>
</html>

在这个示例中，.element 初始状态是不可见的 (opacity: 0;)。当文档的 DOMContentLoaded 事件被触发时（即页面的HTML被完全加载和解析时，但不一定要等待样式表、图像和子框架完成加载），JavaScript 将添加 loaded 类到 .element，从而触发一个 2 秒的淡入效果，使元素从完全透明渐变到完全不透明 (opacity: 1;)。

请注意，实际开发中常常还需要考虑浏览器的兼容性以及对无法执行JavaScript的情况的处理。此外，过渡效果对性能有一定影响，尤其是当涉及到大量元素或复杂的动画时。

2024年6月29日 12:07 回复

可以在页面加载时运行CSS动画，而无需使用任何 JavaScript；你只需要使用CSS3关键帧。

例子

以下是仅使用CSS3滑动到位的导航菜单的演示：

shell
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

解析

这里重要的部分是关键帧动画，我们称之为 slideInFromLeft

shell
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

这基本上是说“在开始时，标题将以其整个宽度离开屏幕的左边缘，并在最后将就位”。

第二部分调用该 slideInFromLeft动画：

shell
animation: 1s ease-out 0s 1 slideInFromLeft;

上面是简写版本，但为了清楚起见，这里是详细版本：

shell
animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */

这是 W3C 的说法。

2024年6月29日 12:07 回复

只需要很少的 JavaScript：

shell
window.onload = function() {
    document.body.className += " loaded";
}

现在是CSS：

shell
.fadein {
    opacity: 0;
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

body.loaded .fadein {
    opacity: 1;
}

我知道问题说的是“没有 Javascript”，但我认为值得指出的是，有一个涉及一行 Javascript 的简单解决方案。

它甚至可以是内联 Javascript，类似这样：

shell
<body onload="document.body.className += ' loaded';" class="fadein">

这就是所需的全部 JavaScript。

2024年6月29日 12:07 回复

我想我已经找到了解决OP问题的一种方法 - 而不是从页面的“on.load”开始的过渡 - 我发现使用动画进行不透明度淡入具有相同的效果，（我正在寻找与OP相同）。

所以我想让正文文本在页面加载时从白色（与网站背景相同）淡入黑色文本颜色 - 而且我从周一才开始编码，所以我正在寻找“on.load”样式的代码，但还不知道 JS - 所以这是我的代码，对我来说效果很好。

shell
#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

无论出于何种原因，这.class仅适用于#id（至少不适用于我的）

希望这会有所帮助 - 据我所知，这个网站对我帮助很大！

2024年6月29日 12:07 回复

CSS仅延迟3s

这里需要注意几点：

一次调用多个动画
我们创建一个等待动画，它只是延迟实际的动画（在我们的例子中是第二个动画）。

代码：

shell
header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

2024年6月29日 12:07 回复

嗯，这是一个棘手的问题。

答案是“并非如此”。

CSS 不是一个功能层。它不知道发生了什么或何时发生。它仅用于向不同的“标志”（类、id、状态）添加_表示_层。

默认情况下，CSS/DOM 不提供任何类型的“加载”状态供 CSS 使用。如果您想要/能够使用 JavaScript，您可以分配一个类body或一些东西来激活某些 CSS。

话虽如此，您可以为此创建一个 hack。我将在这里举一个例子，但它可能适用也可能不适用于您的情况。

我们的操作假设是“接近”就是“足够好”：

shell
<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
    <!-- A whole bunch of HTML here... -->
    <div class="onLoad">OMG, I've loaded !</div>
</body>
</html>

以下是 CSS 样式表的摘录：

shell
.onLoad
{
    -webkit-animation:bounceIn 2s;
}

我们还假设现代浏览器是渐进渲染的，所以我们的最后一个元素将最后渲染，因此这个 CSS 将最后激活。

2024年6月29日 12:07 回复

Web 页面如何在加载时使用 css3 过渡动画？

6个答案

例子

解析

你的答案