我有一个网站，当用户加载页面时，我希望标题一从左侧滑入，并将其不透明度更改为1.而对于标题二，我只希望不透明度更改.但由于某些原因，它是立即发生的，而不是在2秒的持续时间内.
这是我在这里的第一个帖子，我觉得自己很傻，但所有的帮助我都会感激的. 如果您还有其他需要的信息，请告诉我.
以下是我用来复制问题的基本代码:
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
var headingOne = document.querySelector(".header-one-hiding");
var headingTwo = document.querySelector(".header-two-hiding");
headingOne.classList.remove("header-one-hiding");
headingOne.classList.add("header-one-show");
headingTwo.classList.remove("header-two-hiding");
headingTwo.classList.add("header-two-show");
}, 1000);
});.header-one-hiding {
opacity: 0;
left: -1000px;
position: relative;
transition: opacity 2s ease, left 2s ease;
}
.header-one-show {
opacity: 1;
left: 0px;
}
.header-two-hiding {
opacity: 0;
transition: opacity 2s ease;
}
.header-two-show {
opacity: 1;
}<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="header-one-hiding">Header One</div>
<div class="header-two-hiding">Header Two</div>
</body>
</html>