Section Not moving from down to top of the page

user_17065347 0
Viewed 76

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>

css html
2 Answers

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>

user_119891890

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>

user_157407450
Related