Section Not moving from down to top of the page-CodePudding

I try to animate the paragraph witch is inside the section from bottom page to top

but it's not work,

how can i resolve this problem please help me

HTML:

<!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:

code

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;
  }
}

thanks

CodePudding user response：

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>

CodePudding user response：

you can do like this easily your problem is this :

add px to bottom
add animation timing function and duration
add posotion : absolute to p tag

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>

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

        section {
            position: relative;
        }

        section p {
            color: rgb(235, 197, 31);
            position: absolute;
            animation: example 5s linear 0s infinite;
        }

        @keyframes example {
            0% {
                bottom: -100px;
                opacity: 0;
            }

            100% {
                opacity: 1;
                bottom: 0;
            }
        }
    </style>
</head>

<body>
    <section>
        <p>I'm YASER</p>
    </section>
</body>

</html>

CodePudding user response：

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>