图像动画/加载页面时如何使图像滑入？（HTML/JAVASCRIPT）

我没有Javascript方面的经验，读了这么多的帖子，我都不知所措。非常感谢你的帮助

我试图让我的页面图像慢慢滑入最终位置：当点击页面时，从看不见的左边滑入中间

我已经尝试过搜索这个，但是弹出的大部分内容都是如何制作javascript幻灯片

问题还在于如何使div从一个位置滑入到下一个位置？因为图像将在一个div中

我猜这会发生在WindowLoad上

---

再次感谢你的帮助。这个社区太棒了。

我知道你在问关于JS的问题，但这里有一个想法。您可以在CSS中使用动画来实现这一点。看一看:

将此应用于容器：

animation: slideInFromRight 1s ease-in;

这需要分开：

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

---

我知道你在问关于JS的问题，但我有个想法。您可以在CSS中使用动画来实现这一点。看一看:

将此应用于容器：

animation: slideInFromRight 1s ease-in;

这需要分开：

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

---

我们需要三个文件来做这件事

index.html 样式表 script.js 所以我们想把这三者结合起来，得到最终的结果

index.html

style.css

在文件夹中创建所有这三个文件，然后运行index.html文件。

---

您可以通过替换URL来使用自己的图像。

我们需要三个文件来完成此操作

index.html 样式表 script.js 所以我们想把这三者结合起来，得到最终的结果

index.html

style.css

在文件夹中创建所有这三个文件，然后运行index.html文件。

---

您可以通过替换URL来使用自己的图像。

有一点我可以建议，那就是伪造它。一旦我们加载了我们的网站，我们可以显示一个动画，其中显示了一些加载效果，然后加载我们的完整网站

第一步

根据您的需要设计div

步骤2

在CSS中创建一个单独的类，而不是在带有动画样式的HTML中。像这样的

.animation {
    animation: name duration timing-function delay iteration-count direction fill-mode;
}

不要忘记添加关键帧

@keyframes name {
  0% {
      /* Styles */
  }
  100% {
      /* Styles */
  }     
}

步骤3

现在我们使用JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('div').classList.add('animation'); 
});

另外，如果你对CSS动画感兴趣，你可以看看我的，我正在做一个关于动画的短期课程

---

快乐编码

我可以建议一件事，那就是假装。一旦我们加载了我们的网站，我们可以显示一个动画，其中显示了一些加载效果，然后加载我们的完整网站

第一步

根据您的需要设计div

步骤2

在CSS中创建一个单独的类，而不是在带有动画样式的HTML中。像这样的

.animation {
    animation: name duration timing-function delay iteration-count direction fill-mode;
}

不要忘记添加关键帧

@keyframes name {
  0% {
      /* Styles */
  }
  100% {
      /* Styles */
  }     
}

步骤3

现在我们使用JavaScript

document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('div').classList.add('animation'); 
});

另外，如果你对CSS动画感兴趣，你可以看看我的，我正在做一个关于动画的短期课程

---

快乐编码

此外，还可以使用此方法添加onclick动画。只需创建一个函数，将动画类添加到div中，然后添加onclick属性并将其链接到该函数。你们都非常棒。非常感谢你！我一定会看看你的博客@wolfie777如果您觉得这有帮助，您可以接受这一点作为答案。此外，您还可以使用此方法添加onclick动画。只需创建一个函数，将动画类添加到div中，然后添加onclick属性并将其链接到该函数。你们都非常棒。非常感谢你！我一定会看看你的博客@wolfie777如果你觉得这有帮助，你可以接受这个答案！那太神奇了！非常感谢你！哇！那太神奇了！非常感谢你！非常感谢你所做的一切！我真的很感激！非常感谢你所做的一切！我真的很感激！