<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.