CSS 中的动画

Question

h1{
  animation: bouncing 0.5s ease 0s infinite alternate both;
  background: darkblue;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  font-size: 0.75;
  font-weight: 300;
  letter-spacing: 0.2em;
  padding: 1em 2em 1.1em;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: top;
  margin-top: 100px;
}

@keyframes bouncing{
  0%{
    bottom: 0%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  }

  100%{
    bottom: 50%;
    box-shadow: 0 50 50px rgba(0, 0, 0, 0.1);
  }
}

<h1>Loading</h1>

动画没有发生，我已经三次检查了我的代码

所以我正在学习CSS，我正在观看视频来学习动画，但他的动画正在工作，而我的动画没有工作，我已经三次检查了代码 我已经尝试更改 html，但结果仍然相同

Answer 1

您无法为具有

bottom

的元素的

position: relative;

属性设置动画 例如，尝试切换到

absolute

@keyframes bouncing{
  0%{
    bottom: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  }

  100%{
    bottom: 50%;
    box-shadow: 0 50 50px rgba(0, 0, 0, 0.1);
  }
}

h1{

  animation: bouncing 0.5s ease 0s infinite alternate both;
  background: darkblue;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  font-size: 0.75;
  font-weight: 300;
  letter-spacing: 0.2em;
  padding: 1em 2em 1.1em;
  //  position: relative;
  position: absolute;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: top;
  margin-top: 100px;

}

<h1>Loading</h1>