Как реализовать анимацию плавно выпадающего сверху вниз текста?

Question

Есть окошко с текстом и кнопками. При нажатии, текст просто исчезает и появляется. Вопрос: как реализовать, чтобы при появлении текст плавно выпадал сверху?

#step-n0-e:checked~.s0,
#step-n1-e:checked~.s1,
#step-n1-1:checked~.s2,
#step-n1-2:checked~.s3 {
  opacity: 1;
  transition-delay: 0.3s;
  pointer-events: unset;
}

Ссылка на JSFiddle https://jsfiddle.net/IcEWaRRiOr/0sov48hd/6/

Answer 1

Оно?

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #333333;
  color: #dddddd;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 200px;
}

.hidden {
  display: none;
}

.frame label {
  display: block;
  border: 2px solid #dddddd;
  background: transparent;
  color: #dddddd;
  padding: 10px;
  margin: 10px;
  transition: 0.3s;
  outline: none !important;
  cursor: pointer;
}

.frame label:hover {
  background: #dddddd;
  color: #333333;
}

.frame .center {
  opacity: 1;
  transition: opacity 1.3s;
  pointer-events: none;
  transition: all 0.3s; /*добавим*/
  transform: translate(-50%, -200%); /*добавим*/
}

#step-n0-e:checked~.s0,
#step-n1-e:checked~.s1,
#step-n1-1:checked~.s2,
#step-n1-2:checked~.s3 {
  opacity: 1;
  transition-delay: 1.3s;
  pointer-events: unset;
  transition: all 1.3s; /*добавим*/
  transform: translate(-50%, -50%); /*добавим*/
}

<div class="frame">

  <input type="radio" name="step" class="hidden" id="step-n0-e" checked>
  <input type="radio" name="step" class="hidden" id="step-n1-e">
  <input type="radio" name="step" class="hidden" id="step-n1-1">
  <input type="radio" name="step" class="hidden" id="step-n1-2">

  <div class="center s0">
    <h1>Quest</h1>
    <h2>Hello there!</h2>
    <p>This quest is made on pure css. </p>
    <label for="step-n1-e">Play !</label>
  </div>

  <div class="center s1">
    <h1>Quest</h1>
    <h2>Step first</h2>
    <p>You found penguins. What to do?</p>
    <label for="step-n1-1">Send them to south pole</label>
    <label for="step-n1-2">Send them to north pole</label>
  </div>
  <div class="center s2">
    <h1>Quest</h1>
    <h2>Good job!</h2>
    <p>You won the game</p>
    <label for="step-n0-e">Play again !</label>
  </div>
  <div class="center s3">
    <h1>Quest</h1>
    <h2>Hmm...</h2>
    <p>Maybe, it was wrong?</p>
    <label for="step-n1-e">Go back</label>
  </div>
</div>

БЛОГ НА HUSL

Как реализовать анимацию плавно выпадающего сверху вниз текста?

Ответы (1 шт):