[SOLVED] Animation on bottom property

Animation on bottom property

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>

the animation doesnt happen and i have triple checked my code

so i am learning css and i was seeing the video to learn animation but his animation are working and mine arent i have triple checked the code i have tried changing the html one and still the results are same

Solution

You cant animate the bottom property of an element that has a position: relative; Try switching to absolute for example

@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>

If you want your element in a relative position try animating the transform property

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

  100%{
    transform: translateY(-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;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: top;
  margin-top: 100px;

}

<h1>Loading</h1>