Блог

Главная - Вопросы по программированию - Раздел Не перемещается снизу вверх страницы

Раздел Не перемещается снизу вверх страницы

#html #css

Вопрос:

Я пытаюсь анимировать абзац, который находится внутри раздела, от нижней страницы до верхней, но это не работает.

Как я могу решить эту проблему?

 body {
  background: rgb(196, 56, 56);
  height: 100%;
  width: 100%;
}

section {
  position: relative;
}
section p {
  color: rgb(235, 197, 31);
  animation: 1s slid;
}

@keyframes slid {
  0% {
    bottom: -100;
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
} 
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="test.css" />
    <title>Document</title>
  </head>
  <body>
    <section>
      <p>I'm YASER</p>
    </section>
  </body>
</html>

Комментарии:

1. Прежде всего, вам нужно добавить px к этому bottom: -100; . Затем вам сначала нужно расположить раздел в нижней части страницы, а затем анимировать его.

Ответ №1:

Пожалуйста, добавьте «позиция: абсолютная;» в стиль «диапазон p».

И нижнее значение должно содержать «px».

 body {
  background: rgb(196, 56, 56);
  height: 100%;
  width: 100%;
}

section {
  position: relative;
}
section p {
    position: absolute;
  color: rgb(235, 197, 31);
  animation: 1s slid;
}

@keyframes slid {
  0% {
    bottom: -100px;
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
} 
 <body>
    <section>
        <p>I'm YASER</p>
    </section>
</body>

Комментарии:

1. О, я действительно забыла об этом. Огромное спасибо

Ответ №2:

Попробуйте с transform :

 body {
  background: rgb(196, 56, 56);
  height: 100%;
  width: 100%;
}

section {
  position: relative;
}
section p {
  color: rgb(235, 197, 31);
  animation: 1s slid;
}

@keyframes slid {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
} 
 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="test.css" />
    <title>Document</title>
  </head>
  <body>
    <section>
      <p>I'm YASER</p>
    </section>
  </body>
</html>
Метки: