.gototop {
  display: none;
  animation: hide 350ms ease-out forwards 1;
  color: #fff;
  position: fixed;
  bottom: 16px;
  right: 16px;
  cursor:pointer;
}

.gototop img {
  transition: transform 0.3s ease-in-out;
}

.gototop:hover img, .gototop:focus img {
  transform: translateY(-10px);
}

.isvisible {
  animation: show 1s ease-out forwards 1;
}

@keyframes hide {
  0% {
  opacity: 1;
  transform:translateY(0);
  }
  25% {
  opacity: .5;
  transform: rotate(-3deg) translateY(-40px);
  }
  75% {
  transform: rotate(3deg);
  }
  100% {
  opacity: 0;
  transform:translateY(100px);
  }
}

@keyframes show {
  0% {
  transform: rotate(0deg);
  }
  25% {
  opacity: .5;
  transform: rotate(-3deg) translateY(-40px);
  }
  75% {
  transform: rotate(3deg);
  }
  100% {
  opacity: 1;
  transform: rotate(0deg);
  }
}