Css 如何添加一个类以在开始时触发转换

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&nbsp;&nbsp;—&nbsp;&nbsp;</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.&nbsp;&nbsp;—&nbsp;&nbsp;</li>
                     <li class="text msg-2">Third message is shown scrolling here.&nbsp;&nbsp;—&nbsp;&nbsp;</li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
   <button class="play" type="button" aria-label="Open"></button>
</div>