CodePen

HTML

            
              <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
<div class="animation"></div>
<div class="transition"><p>Hover For Transition Action!</p></div>
            
          
!

CSS

            
              body {background: #ef;margin: 4em; font-family: Dosis, hevetica, arial, sans-serif; font-weight:400;}

div {
  margin-bottom:4em;
}

.animation {
  background:#f6ad2d;
  color:white;
  text-transform: uppercase;
  font-size:1.5em;
  width:150px;
  height:150px;
  position:relative;
  animation: bounceAround 1.1s ease-in-out infinite;
 }

.transition{
  background:#65a6a7;
  color:#efefef;
  width:40%;
  padding:1em 0;
  text-align: center;
  font-size:1.2em;
  letter-spacing: .05em;
  border-radius: 10px;
  transition: .4s background ease-out;
}

.transition p {
  margin:0;
  padding:0;
  pointer-events: none;
}

.transition:hover {
  background:#e65445;
}

@keyframes bounceAround {
  0% {transform:translateY(0);}
  20% {transform:translateY(-60px) rotate(0deg);}
  25%{transform:translateY(20px) rotate(0deg);}
  35%, 55%{transform:translateY(0px) rotate(0deg);}
  60% {transform: translateY(-20px) rotate(0deg);}
  100%{transform: translateY(-20px) rotate(360deg);}
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................