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

3个答案

要在页面加载过程中使用 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仅延迟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动画，而无需使用任何 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 回复

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

3个答案

例子

解析

你的答案