CSS Animation

CSS Animation

by soum1

HTML

<a href="javascript:;" id="TopOfPage"></a>

CSS

#TopOfPage {
  position: fixed;
  background: #AB87FF; 
  padding: 20px;
  width: 30px;
  height: 30px;
  right: 50px;
  box-shadow: 1px 0px 3px rgba(0,0,0,0.8);
  animation: bounce 1.5s ease infinite alternate;
  -webkit-animation: bounce 1.5s ease infinite alternate;
  -moz-animation: bounce 1.5s ease infinite alternate;
  -o-animation: bounce 1.5s ease infinite alternate;
  bottom: 50px;
}
#TopOfPage:after {
    content: "";
    border: solid #000;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
    position: absolute;
    top: 44%;
    bottom: 50px;
    transform: translate(-50%) rotate(-135deg);
    -webkit-transform: translate(-50%) rotate(-135deg);
    -moz-transform: translate(-50%) rotate(-135deg);
    -o-transform: translate(-50%) rotate(-135deg);
    left: 50%;
}

@keyframes bounce {
  from {
    bottom: 50px;
  }

  to {
     bottom: 100px;
     background: #B4E1FF;
  }
}
@-webkit-keyframes bounce {
  from {
    bottom: 50px;
  }

  to {
     bottom: 100px;
     background: #B4E1FF;
  }
}
@-moz-keyframes bounce {
  from {
    bottom: 50px;
  }

  to {
     bottom: 100px;
     background: #B4E1FF;
  }
}
@-o-keyframes bounce {
  from {
    bottom: 50px;
  }

  to {
     bottom: 100px;
     background: #B4E1FF;
  }
}


body {
  background: #F7E1D7;
}
body * {
  box-sizing: border-box;
}


#TopOfPage:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
}