Hover/scss/hover/_hang.scss

28 lines
475 B
SCSS

/* Hang */
@keyframes hang {
50% {
transform: translateY(3px);
}
100% {
transform: translateY(6px);
}
}
@mixin hang {
display: inline-block;
transition-duration: .5s;
transition-property: transform;
@extend %hacks;
&:hover {
transform: translateY(6px);
animation-name: hang;
animation-duration: 1.5s;
animation-delay: $defaultDuration;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
}