How to add a class to trigger a transition at the start - css

Question

I was just told this:
I'm not adding a class to trigger a transition at the start
How is that fixed in the code?
How do I have the ticker fade in on page load and fade out when the button is clicked?
code https://jsfiddle.net/3r2gv460/
When the button is clicked it doesn't fade out.
Ticker fade in
.video-one {
display: flex;
align-items: flex-end;
}
.alert {
transition: opacity 4s ease 0s;
opacity: 0;
}
.video-one.slide .alert {
opacity: 1;
transition-delay: 10.5s;
}
.slide .video-one .alert {
opacity: 0;
transition: opacity 4s ease 0s;
}
Sliding door animation
.video-one {
top: 0;
transform: translateY(calc(-100% - 1px));
animation: curtainDown 10s ease-in 1s forwards;
}
#keyframes curtainDown {
to {
transform: translateY(0%);
}
}
.curtain.slide .video-one {
transform: translateY(0%);
animation: curtainUp 8s ease-in 3s forwards;
}
#keyframes curtainUp {
to {
transform: translateY(calc(-100% - 1px));
}
}
What seems to be the issue, and how would this be fixed or adjusted?
What I should be seeing:
const manageCover = (function makeManageCover() {
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function openCurtain(cover) {
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
return curtain;
}
function showVideo(curtain) {
const thewrap = curtain.parentElement.querySelector(".wrap");
show(thewrap);
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const curtain = openCurtain(cover);
showVideo(curtain);
cover.dispatchEvent(new Event("afterClick"));
}
function init(callback) {
const cover = document.querySelector(".play");
cover.addEventListener("click", coverClickHandler);
cover.addEventListener("afterClick", callback);
}
return {
init
};
}());
const videoPlayer = (function makeVideoPlayer() {
let playlist;
let player;
function loadIframeScript() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onYouTubeIframeAPIReady() {
const cover = document.querySelector(".play");
const wrapper = cover.parentElement;
const frameContainer = wrapper.querySelector(".video");
addPlayer(frameContainer, playlist);
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerReady(event) {
player = event.target;
player.setVolume(100);
shufflePlaylist(player);
}
function createPlaylist(videoIds) {
return videoIds.join();
}
function createOptions(videoIds) {
const options = {
height: 360,
host: "https://www.youtube-nocookie.com",
width: 640
};
options.playerVars = {
autoplay: 0,
cc_load_policy: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
rel: 0
};
options.events = {
"onReady": onPlayerReady
};
options.playerVars.loop = 1;
options.playerVars.playlist = createPlaylist(videoIds);
return options;
}
function createVideoOptions(ids) {
const options = createOptions(ids);
return options;
}
function addPlayer(video, ids) {
const options = createVideoOptions(ids);
player = new YT.Player(video, options);
return player;
}
function play() {
if (player && player.playVideo) {
player.playVideo();
}
}
function init(videoIds) {
player = null;
loadIframeScript();
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
playlist = videoIds;
return play;
}
return {
init,
play
};
}());
manageCover.init(videoPlayer.init([
"0dgNc5S8cLI",
]));
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
}
.container {
position: absolute;
left: 0;
right: 0;
min-height: 100%;
min-width: 255px;
display: flex;
padding: 8px 8px;
}
.curtain {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
position: relative;
}
.curtain::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #0a0a0a;
border: 1px solid;
border-color: #000 #101010 #000 #101010;
;
}
.curtain::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
outline: 1px solid #f91f6e;
pointer-events: none;
}
.curtain.slide::after {
outline: 1px solid #0059dd;
transition: outline 2s ease-in;
/* add this */
/*background-image: none;*/
}
:root {
--wide: 32px;
--angle1: 0;
--angle2: -90;
}
.video-one {
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: repeating-linear-gradient(calc(var(--angle1) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px)), repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px));
background-color: #222;
border-bottom: 2px solid red;
background-repeat: no-repeat;
z-index: 0;
}
.video-one::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: url("https://via.placeholder.com/264x264");
background-position: center;
/*background-size: 41.25% 73.33%;*/
background-size: 41.25% 79.52%;
background-repeat: no-repeat;
z-index: -1;
}
.ratio-keeper {
position: relative;
height: 0;
padding-top: 56.25%;
margin: auto;
overflow: hidden;
}
.play {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid;
z-index: 1;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
border-color: blue;
animation: fadeInPlay 2s ease-in 2s forwards;
animation-delay: 10s;
opacity: 0;
cursor: default;
pointer-events: none;
}
#keyframes fadeInPlay {
0% {
opacity: 0;
}
99.9% {
opacity: 1;
pointer-events: none;
}
100% {
opacity: 1;
cursor: pointer;
pointer-events: initial;
}
}
.play::before {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 27px solid;
transform: translateX(4px);
border-left-color: blue;
}
.play:hover {
box-shadow: 0 0 0 5px rgba(20, 179, 33, 0.5);
}
.play:focus {
outline: 0;
box-shadow: 0 0 0 5px rgba(111, 0, 255, 0.5);
}
.exit {
position: absolute;
top: auto;
bottom: -47.63px;
margin: auto;
right: 0;
left: 0;
width: 47px;
height: 47px;
cursor: pointer;
border-radius: 100%;
background: transparent;
border: 5px solid red;
box-sizing: border-box;
opacity: 0;
pointer-events: none;
clip-path: circle(50%);
}
.slide .exit {
animation: fadeInExit 4s forwards 7.5s;
}
#keyframes fadeInExit {
99% {
pointer-events: none;
}
100% {
pointer-events: initial;
opacity: 1;
}
}
.exit::before,
.exit::after {
content: "";
background-color: red;
width: 47px;
height: 5px;
position: absolute;
top: 0px;
left: -5px;
right: 0;
bottom: 0;
margin: auto;
}
.exit::before {
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.hide {
display: none;
}
.video-one {
top: -101%;
/* for testing: fast */
transition: all 10s ease-in 0s;
transition-delay: 1s;
}
.video-one.slide {
top: 0%;
}
.curtain.slide .video-one {
transition-delay: 3s;
transform: translateY(calc(-100% - 1px));
}
.alert {
padding: 0px;
}
.bg-yellow {
background: #ffc000;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 900;
}
.alert .message {
width: 100%;
overflow: hidden;
position: relative;
margin-left: 0px;
color: #000;
font-size: 16px;
letter-spacing: -.2px;
line-height: 22px;
text-transform: uppercase;
}
.alert {
display: flex;
position: relative;
text-decoration: none;
}
.pill {
padding: 2px 6px;
font-size: 12px;
line-height: 18px;
text-transform: uppercase;
white-space: nowrap;
background: #000;
color: #fff;
}
.animate ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.animate ul li {
height: 20px;
white-space: nowrap;
}
.text {
margin: 0 auto;
}
.alert .animate ul {
display: flex;
animation: 90s linear 0s infinite normal none running banner-scroll;
}
#keyframes banner-scroll {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(-3738.5px);
}
}
.video-one {
display: flex;
align-items: flex-end;
}
.alert {
transition: opacity 4s ease 0s;
opacity: 0;
}
.video-one.slide .alert {
opacity: 1;
transition-delay: 10.5s;
}
.slide .video-one .alert {
opacity: 0;
transition: opacity 4s ease 0s;
}
.video-one {
top: 0;
transform: translateY(calc(-100% - 1px));
animation: curtainDown 10s ease-in 1s forwards;
}
#keyframes curtainDown {
to {
transform: translateY(0%);
}
}
.curtain.slide .video-one {
transform: translateY(0%);
animation: curtainUp 8s ease-in 3s forwards;
}
#keyframes curtainUp {
to {
transform: translateY(calc(-100% - 1px));
}
}
<div class="container">
<div class="curtain">
<div class="ratio-keeper">
<div class="video-one">
<div class="alert bg-yellow">
<div class="message animate">
<ul>
<li class="text msg-0">First message is displayed here lorem ipsum, dolor sit amet adispicing — </li>
<li class="text msg-1">Second Message Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed purus mi. Etiam et elit vulputate, venenatis nibh in, lobortis elit. Phasellus ullamcorper purus ut diam tincidunt venenatis. Sed tincidunt vestibulum malesuada. — </li>
<li class="text msg-2">Third message is shown scrolling here. — </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<button class="play" type="button" aria-label="Open"></button>
</div>

Answer 1

This worked: https://jsfiddle.net/pezf60b5/
.alert {
animation: alerton 10s ease forwards;
opacity: 0;
}
/*
.video-one.slide .alert {
opacity: 1;
transition: opacity 4s ease 10.5s
}
*/
.slide .video-one .alert {
animation: alertoff 4s ease;
}
#keyframes alerton {
0% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes alertoff {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}