Tuesday

How to slide door down on page load, then slide door up on button click

6:17 PM css, css-animations, css-transitions, javascript No comments

Issue

When the webpage loads in, the door goes down, and when the button is pressed, the door should go back up.

The fan and the background should first be seen, then the door should slide down, then clicking on the door raises it.

Is there a way for this to be improved?

.video-one {
  top: -101%;
  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));
}

let videoOne = document.querySelector('.video-one')
requestAnimationFrame(() => {
  videoOne.classList.add("slide");
})

How the code works is, on page load the wall comes down, then on button click the wall goes up.

let videoOne = document.querySelector('.video-one')
requestAnimationFrame(() => {
  videoOne.classList.add("slide");
})

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 {
  background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}

.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-repeat: no-repeat;
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.fence {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: linear-gradient(45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px), linear-gradient(-45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px);
  background-size: 10px 10px;
  filter: drop-shadow(0 0 5px #000);
  clip-path: circle(25% at center);
}

.fence>div {
  position: absolute;
  /*top: 0;*/
  left: 0;
  right: 0;
  /*width: 100%;*/
  height: 0.55%;
  /*height: 2px;*/
  background: green;
}

.fence>div:nth-child(1) {
  top: 10%;
}

.fence>div:nth-child(2) {
  top: 20%;
}

.fence>div:nth-child(3) {
  top: 30%;
}

.fence>div:nth-child(4) {
  top: 40%;
}

.fence>div:nth-child(5) {
  top: 50%;
}

.fence>div:nth-child(6) {
  top: 60%;
}

.fence>div:nth-child(7) {
  top: 70%;
}

.fence>div:nth-child(8) {
  top: 80%;
}

.fence>div:nth-child(9) {
  top: 90%;
}

.fan svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 70%;
  margin: auto;
}

.slide .fan svg {
  animation: fan-spin linear;
  animation-duration: 12s;
  animation-iteration-count: 1;
  animation-delay: 3s;
}

@keyframes fan-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe {
  display: block;
  animation: iframe 6s ease forwards;
  animation-delay: 6s;
  opacity: 0;
}

@keyframes iframe {
  to {
    opacity: 1;
  }
}

iframe {
  user-select: none;
}

.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%;
  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));
}

<div class="container">
    <div class="curtain">
        <div class="ratio-keeper">
            <div class="fence">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="fan">
                <svg width="70%" height="70%" viewBox="76 130 381 381">
                    <g id="fan">
                        <path fill="#000" stroke="#000"
                            d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
                    </g>
                </svg>
            </div>
            <div class="cross"></div>

            <div class="wrap hide">
                <div class="video video-frame" data-id=""></div>
            </div>

            <div class="video-one"></div>

        </div>
        <a href="https://www.google.com/">
            <div class="exit"></div>
        </a>

    </div>
    <button class="play" type="button" aria-label="Open"></button>
</div>

Solution

code: https://jsfiddle.net/rn5p9fb4/

What was used:

.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));
  }
}

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");
   //curtain.classList.add("slide2");
    return curtain;
  }

  function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const curtain = openCurtain(cover);
   // videoOne.classList.add("slide");
    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 {
  background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}

.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-repeat: no-repeat;
}

.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  margin: auto;
  overflow: hidden;
}

.fence {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: linear-gradient(45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px), linear-gradient(-45deg, transparent, transparent 7px, rgb(113, 121, 126) 7px, rgb(113, 121, 126) 7.5px, transparent 7.5px, transparent 10px);
  background-size: 10px 10px;
  filter: drop-shadow(0 0 5px #000);
  clip-path: circle(25% at center);
}

.fence>div {
  position: absolute;
  /*top: 0;*/
  left: 0;
  right: 0;
  /*width: 100%;*/
  height: 0.55%;
  /*height: 2px;*/
  background: green;
}

.fence>div:nth-child(1) {
  top: 10%;
}

.fence>div:nth-child(2) {
  top: 20%;
}

.fence>div:nth-child(3) {
  top: 30%;
}

.fence>div:nth-child(4) {
  top: 40%;
}

.fence>div:nth-child(5) {
  top: 50%;
}

.fence>div:nth-child(6) {
  top: 60%;
}

.fence>div:nth-child(7) {
  top: 70%;
}

.fence>div:nth-child(8) {
  top: 80%;
}

.fence>div:nth-child(9) {
  top: 90%;
}

.fan svg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 70%;
  margin: auto;
}

.slide .fan svg {
  animation: fan-spin linear;
  animation-duration: 12s;
  animation-iteration-count: 1;
  animation-delay: 3s;
}

@keyframes fan-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe {
  display: block;
  animation: iframe 6s ease forwards;
  animation-delay: 6s;
  opacity: 0;
}

@keyframes iframe {
  to {
    opacity: 1;
  }
}

iframe {
  user-select: none;
}

.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: 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="fence">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="fan">
                <svg width="70%" height="70%" viewBox="76 130 381 381">
                    <g id="fan">
                        <path fill="#000" stroke="#000"
                            d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
                    </g>
                </svg>
            </div>
            <div class="cross"></div>

            <div class="wrap hide">
                <div class="video video-frame" data-id=""></div>
            </div>

            <div class="video-one"></div>

        </div>
        <a href="https://www.google.com/">
            <div class="exit"></div>
        </a>

    </div>
    <button class="play" type="button" aria-label="Open"></button>
</div>

Answered By - Eve Ninnall

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Tuesday

How to slide door down on page load, then slide door up on button click

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels