CODEWITHSUNDEEP
htmlcss
yaser kullab
yaser kullab

Reputation: 23

Section Not moving from down to top of the page

I'm trying to animate the paragraph which is inside the section from the bottom page to the top, but it does not work.

How can I resolve this problem?

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>

Upvotes: 2

Views: 312

Answers (2)

Kirill Savik
Kirill Savik

Reputation: 1278

Please add "position: absolute;" to "span p" style.

And bottom value have to contain "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>

Upvotes: 1

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

Try with 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>

Upvotes: 1

Related Questions