javascript - 图像动画/如何在页面加载时让图像滑入? (HTML/JavaScript)

标签 javascript html css image animation

<分区>

我没有 Javascript 经验,阅读了这么多帖子后,我不知所措。非常感谢您的帮助。

我试图让我的页面图像缓慢地“滑入”到它的最终位置:当页面被点击时,从(不可见的)左侧到中心。

我试过搜索这个,但弹出的大部分内容都是“如何制作 javascript 幻灯片放映”。

问题也将是“如何让 div 从一个位置滑入到下一个位置?” (因为图像将位于一个 div 中。

我猜它会发生在 WindowLoad() 上。

再次感谢您的帮助。这个社区很棒。

最佳答案

我知道你问的是关于 JS 的问题,但这是一个想法。您可以在 CSS 中使用动画来做到这一点。看一看:

将此应用于容器:

animation: slideInFromRight 1s ease-in;

这需要分开:

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

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

关于javascript - 图像动画/如何在页面加载时让图像滑入? (HTML/JavaScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64622319/

相关文章:

javascript - jQuery:按 Enter 时在光标位置添加换行符

javascript - 使用 index() 的 jquery 函数

css - 在angularjs中验证时如何添加复选标记和x?

javascript - 错误 : UnhandledPromiseRejectionWarning: Unhandled promise rejection

html - Osclass 使内容与类别并排

javascript - jQuery fadeOut 回调函数 - 为什么本地函数不起作用而全局函数可以?

javascript - 如何获取 Google App 脚本中所有选中复选框的值

html - .img-responsive Bootstrap 问题响应设计。图像停留在 25% 宽度

javascript - 检查所有在 wamp 中不起作用的复选框

javascript - ServiceWorker 不更新缓存