时间戳

首页 > 解决方案 > 部分不从页面底部移动到顶部

html - 部分不从页面底部移动到顶部

问题描述

我正在尝试为从底部页面到顶部的部分内的段落设置动画，但它不起作用。

我该如何解决这个问题？

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>

标签： htmlcss

解决方案

尝试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>

推荐阅读