<div class="float-area">
  <img src="https://ethrex-watch.web.app/favicon.ico" class="floating-img" alt="my floating image">
  <br/>
  <span>Flaoting pop corn</span>
</div>

.float-area{
  height:100vh;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
}

.floating-img{
  transform: translateY(-10%);
  animation: floater 1.5s infinite;
  transition: ease 0.5s;
  width: 80px;
  height:80px;
}



@keyframes floater {
  0%{transform: translateY(-10%);transition: ease 0.5s;}
  50%{transform: translateY(10%);transition: ease 0.5s;}
}