Float on Hover

Link that floats on hover. Kinda fun. Some work should go into a better set of keyframes, but I'm happy with this as a proof of concept.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Float on Hover</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class='parent'>
  <a class='item link'>A</a>
</div>
  <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>

  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
@-webkit-keyframes float {
  0% {
    -webkit-transform: translate(-1px, 3px) translate(-50%, -50%) rotateX(3deg) rotateY(-5deg) rotateZ(-3deg);
            transform: translate(-1px, 3px) translate(-50%, -50%) rotateX(3deg) rotateY(-5deg) rotateZ(-3deg);
  }
  20% {
    -webkit-transform: translate(-4px, 2px) translate(-50%, -50%) rotateX(2deg) rotateY(15deg) rotateZ(1deg);
            transform: translate(-4px, 2px) translate(-50%, -50%) rotateX(2deg) rotateY(15deg) rotateZ(1deg);
  }
  40% {
    -webkit-transform: translate(3px, 1px) translate(-50%, -50%) rotateX(-11deg) rotateY(4deg) rotateZ(11deg);
            transform: translate(3px, 1px) translate(-50%, -50%) rotateX(-11deg) rotateY(4deg) rotateZ(11deg);
  }
  60% {
    -webkit-transform: translate(1px, 2px) translate(-50%, -50%) rotateX(8deg) rotateY(-11deg) rotateZ(10deg);
            transform: translate(1px, 2px) translate(-50%, -50%) rotateX(8deg) rotateY(-11deg) rotateZ(10deg);
  }
  80% {
    -webkit-transform: translate(-4px, 5px) translate(-50%, -50%) rotateX(11deg) rotateY(2deg) rotateZ(-13deg);
            transform: translate(-4px, 5px) translate(-50%, -50%) rotateX(11deg) rotateY(2deg) rotateZ(-13deg);
  }
  100% {
    -webkit-transform: translate(1px, 5px) translate(-50%, -50%) rotateX(15deg) rotateY(-8deg) rotateZ(7deg);
            transform: translate(1px, 5px) translate(-50%, -50%) rotateX(15deg) rotateY(-8deg) rotateZ(7deg);
  }
}
@keyframes float {
  0% {
    -webkit-transform: translate(-1px, 3px) translate(-50%, -50%) rotateX(3deg) rotateY(-5deg) rotateZ(-3deg);
            transform: translate(-1px, 3px) translate(-50%, -50%) rotateX(3deg) rotateY(-5deg) rotateZ(-3deg);
  }
  20% {
    -webkit-transform: translate(-4px, 2px) translate(-50%, -50%) rotateX(2deg) rotateY(15deg) rotateZ(1deg);
            transform: translate(-4px, 2px) translate(-50%, -50%) rotateX(2deg) rotateY(15deg) rotateZ(1deg);
  }
  40% {
    -webkit-transform: translate(3px, 1px) translate(-50%, -50%) rotateX(-11deg) rotateY(4deg) rotateZ(11deg);
            transform: translate(3px, 1px) translate(-50%, -50%) rotateX(-11deg) rotateY(4deg) rotateZ(11deg);
  }
  60% {
    -webkit-transform: translate(1px, 2px) translate(-50%, -50%) rotateX(8deg) rotateY(-11deg) rotateZ(10deg);
            transform: translate(1px, 2px) translate(-50%, -50%) rotateX(8deg) rotateY(-11deg) rotateZ(10deg);
  }
  80% {
    -webkit-transform: translate(-4px, 5px) translate(-50%, -50%) rotateX(11deg) rotateY(2deg) rotateZ(-13deg);
            transform: translate(-4px, 5px) translate(-50%, -50%) rotateX(11deg) rotateY(2deg) rotateZ(-13deg);
  }
  100% {
    -webkit-transform: translate(1px, 5px) translate(-50%, -50%) rotateX(15deg) rotateY(-8deg) rotateZ(7deg);
            transform: translate(1px, 5px) translate(-50%, -50%) rotateX(15deg) rotateY(-8deg) rotateZ(7deg);
  }
}
.parent {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-perspective: 250px;
          perspective: 250px;
}

.link {
  cursor: pointer;
}

.item {
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  background: red;
  color: white;
  font-size: 45px;
  text-align: center;
  padding: 0;
  top: 50%;
  left: 50%;
  -webkit-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 2px;
}
.item:hover {
  -webkit-animation: float linear alternate-reverse infinite 5s;
          animation: float linear alternate-reverse infinite 5s;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Float on Hover ) is write by Michael Mroz, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Michael Mroz