仅在第一次加载页面时使 div 不可见

Question

I want my .card div on the right side of the page (or at the bottom half when screen is less than 1000px) to appear only after pressing Enter button. And then again to appear the same way after each subsequent 'Enter'. Animation works correctly, only thing I can't make it work is to have .card hidden first time I load the page. I have tried with opacity: 0 , but in that case.card will disappear right after the animation end. I have also tried to tweak with height property, but in that case my responsive page didn't look as expected. How can I fix this?

html:

  <div class="container">
      <div class="intro">
        <code>WEATHER</code> <br />
        <h1>DATA AND FORECAST</h1>
        <br />
        <input
          type="text"
          name="cityInput"
          class="cityInput"
          id="cityInput"
          placeholder="Enter city name and press Enter..."
        />
      </div>
      <div class="output">
        <div class="card"></div>
      </div>
    </div>

css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  min-height: 100vh; 
  background-image: url("https://images.unsplash.com/photo-1488866022504-f2584929ca5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1162&q=80"); /* The image used */
  background-color: #cccccc; 
  background-repeat: no-repeat;
  background-position: center; 
  background-size: cover;
  isolation: isolate;
  display: flex;
}

.intro {
  position: relative;
  width: 40%;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #2567a7;
  mix-blend-mode: multiply;
}

code {
  display: block;
  width: max-content;
  background: #fff;
  color: #2567a7;
  padding: 10px;
  margin: 2%;
  font-size: 40px;
  font-weight: bold;
  border-radius: 5px;
}

.intro h1 {
  font-size: 60px;
  font-weight: bold;
  color: #fff;
  margin: 2%;
}

.cityInput {
  outline: none;
  border: none;
  background: white;
  padding: 10px;
  margin: 2%;
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #2567a7;
  text-align: left;
  width: 50%;
}

.cityInput::placeholder {
  color: #2567a7;
  text-align: left;
}

.output {
  width: 67%;
  display: grid;
  place-items: center;
}

.card {
  width: 60%;
  height: 60%;
  background: #030815;
  color: #fff;
  transition: all 2s;
}

.card:hover {
  background: rgba(3, 8, 21, 0.8);
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media screen and (max-width: 1000px) {
  .container {
    flex-direction: column;
  }

  .intro {
    width: 100%;
    height: 40%;
    align-items: center;
    padding: 2%;
  }
  code {
    font-size: 20px;
    margin: 1%;
  }
  .intro h1 {
    margin: 1%;
    font-size: 30px;
    font-weight: bold;
  }
  .cityInput {
    margin: 1%;
  }
  .output {
    margin: 0 auto;
    margin-top: 5%;
    width: 80%;
  }
  .card {
    width: 100%;
    height: 55vh;
  }
  .cityInput {
    font-size: 16px;
  }
}

js:

const cityInput = document.querySelector("#cityInput");
const card = document.querySelector(".card");

const pressEnter = (e) => {
  let city = cityInput.value;

  if (e.key === "Enter") {
    console.log(city);
    card.innerHTML = `<div><h1>${city}</h1> <h2>${city}</h2></div>`;
    cityInput.value = "";

    card.style.animation = "appear 2s linear";
    card.addEventListener("animationend", function () {
      card.style.animation = "";
    });
  }
};

cityInput.addEventListener("keydown", pressEnter);

Answer 1

Just adding opacity: 0 to your .card class and setting its opacity to 1 in your function works totally fine for me.

.card {
  width: 60%;
  height: 60%;
  background: #030815;
  color: #fff;
  transition: all 2s;
  opacity: 0;
}

const cityInput = document.querySelector("#cityInput");
const card = document.querySelector(".card");

const pressEnter = (e) => {
  card.style.opacity = "1";
  let city = cityInput.value;

  if (e.key === "Enter") {
    console.log(city);
    card.innerHTML = `<div><h1>${city}</h1> <h2>${city}</h2></div>`;
    cityInput.value = "";

    card.style.animation = "appear 2s linear forward";
    card.addEventListener("animationend", function () {
      card.style.animation = "";
    });
  }
};

cityInput.addEventListener("keydown", pressEnter);

Answer 2

I hope this is what you were searching for. Pretty much, the trick to make the card show after the page loads is by applying the following CSS to the element you want it to be affected:

.fade-in {
    opacity: 1;                         /* We will end showing this */
    animation-name: fadeInOpacity;      /* Lets use this keyframe animation */
    animation-iteration-count: 1;       /* This animation will be run once */
    animation-timing-function: ease-in; /* Lets make it fluid */
    animation-duration: 2s;             /* the property name is self explanatory */
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0; /* We start hiding it */
    }
    100% {
        opacity: 1; /* We end showing it */
    }
}

 .fade-in { opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 2s; } @keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }.container { min-height: 100vh; background-image: url("https://images.unsplash.com/photo-1488866022504-f2584929ca5f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1162&q=80"); /* The image used */ background-color: #cccccc; background-repeat: no-repeat; background-position: center; background-size: cover; isolation: isolate; display: flex; }.intro { position: relative; width: 40%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }.intro::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #2567a7; mix-blend-mode: multiply; } code { display: block; width: max-content; background: #fff; color: #2567a7; padding: 10px; margin: 2%; font-size: 40px; font-weight: bold; border-radius: 5px; }.intro h1 { font-size: 60px; font-weight: bold; color: #fff; margin: 2%; }.cityInput { outline: none; border: none; background: white; padding: 10px; margin: 2%; border-radius: 5px; font-size: 20px; font-weight: bold; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color: #2567a7; text-align: left; width: 50%; }.cityInput::placeholder { color: #2567a7; text-align: left; }.output { width: 67%; display: grid; place-items: center; }.card { width: 60%; height: 60%; background: #030815; color: #fff; transition: all 2s; }.card:hover { background: rgba(3, 8, 21, 0.8); } @keyframes appear { 0% { opacity: 0; } 100% { opacity: 1; } } @media screen and (max-width: 1000px) {.container { flex-direction: column; }.intro { width: 100%; height: 40%; align-items: center; padding: 2%; } code { font-size: 20px; margin: 1%; }.intro h1 { margin: 1%; font-size: 30px; font-weight: bold; }.cityInput { margin: 1%; }.output { margin: 0 auto; margin-top: 5%; width: 80%; }.card { width: 100%; height: 55vh; }.cityInput { font-size: 16px; } }

 <div class="container"> <div class="intro"> <code>WEATHER</code> <br /> <h1>DATA AND FORECAST</h1> <br /> <input type="text" name="cityInput" class="cityInput" id="cityInput" placeholder="Enter city name and press Enter..." /> </div> <div class="output"> <div class="card fade-in">Fade this card in after loading...</div> </div> </div>