<div class="keyframe"></div>

<div class="transform">
  hover over me!
</div>
div {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  display: inline-block;
}

.keyframe {
  background-color: orchid;
  animation: bounce 2s infinite;
  position: relative;
}

.transform {
  background-color: lime;
}

@keyframes bounce {
  0% { top: 0px; }
  60% { top: 100px; }
  100% { top: 0px; }
}

.transform:hover {
  transform: skew(7deg, 15deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.