CSS переход на нагрузку через JQUERY

Question

Я пытаюсь написать некоторый код, чтобы вызвать переход при загрузке, поэтому у меня в основном есть jquery, добавляющий класс, transition-left к div и немного css, который говорит, что нужно двигаться влево, если у него есть класс transition-left. Однако, даже если класс добавляется, переход не происходит. Я просто не знаю, почему это так. Вот мой код.

$(document).ready(function () {
    $("#curtain-left").addClass("transition-left");
});

$(document).ready(function () {
    $("#curtain-right").addClass("transition-right");
});

.curtain {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: 0;

	/* CSS variables to prevent duplication below */
	--piece-width: 100px;
}

.curtain .content {
	/* I used flex since I'm more comfortable with that, but you can use floats if you prefer. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.curtain-panel {
	display: flex;
	align-items: center;
	position: absolute;
	width: 50%;
	height: 100%;

	transition: left, right;
	transition-duration: 3s;
}

.curtain-panel.left {
	left: 0;
	justify-content: end;
}

.curtain-panel.right {
	right: 0;
}

.curtain-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;

	background-color: #333;
}

.curtain-piece-left {
	width: var(--piece-width);
	height: auto;
	z-index: 2;
	margin: calc(100% - var(--piece-width) / 2);
}

.curtain-piece-right {
	width: var(--piece-width);
	height: auto;
	z-index: 2;
	margin: calc(var(--piece-width) / -2);
}

.transition-left{
	left: -100%;
}

.transition-right{
	right: -100%;
}

Answer 1

Вы добавляете его не в том месте. Проверьте мою версию: