71 lines
1.5 KiB
CSS
71 lines
1.5 KiB
CSS
|
|
||
|
|
@keyframes wobble-vertical {
|
||
|
|
16.65% {
|
||
|
|
transform: translateX(8px);
|
||
|
|
}
|
||
|
|
|
||
|
|
33.3% {
|
||
|
|
transform: translateX(-6px);
|
||
|
|
}
|
||
|
|
|
||
|
|
49.95% {
|
||
|
|
transform: translateX(4px);
|
||
|
|
}
|
||
|
|
|
||
|
|
66.6% {
|
||
|
|
transform: translateX(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
83.25% {
|
||
|
|
transform: translateX(1px);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: translateX(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Icon Pulse */
|
||
|
|
@-webkit-keyframes hvr-icon-pulse {
|
||
|
|
25% {
|
||
|
|
-webkit-transform: scale(1.3);
|
||
|
|
transform: scale(1.3);
|
||
|
|
}
|
||
|
|
75% {
|
||
|
|
-webkit-transform: scale(0.8);
|
||
|
|
transform: scale(0.8);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes hvr-icon-pulse {
|
||
|
|
25% {
|
||
|
|
-webkit-transform: scale(1.3);
|
||
|
|
transform: scale(1.3);
|
||
|
|
}
|
||
|
|
75% {
|
||
|
|
-webkit-transform: scale(0.8);
|
||
|
|
transform: scale(0.8);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.hvr-icon-pulse {
|
||
|
|
display: inline-block;
|
||
|
|
vertical-align: middle;
|
||
|
|
-webkit-transform: perspective(1px) translateZ(0);
|
||
|
|
transform: perspective(1px) translateZ(0);
|
||
|
|
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
.hvr-icon-pulse .hvr-icon {
|
||
|
|
-webkit-transform: translateZ(0);
|
||
|
|
transform: translateZ(0);
|
||
|
|
-webkit-transition-timing-function: ease-out;
|
||
|
|
transition-timing-function: ease-out;
|
||
|
|
}
|
||
|
|
.hvr-icon-pulse:hover .hvr-icon, .hvr-icon-pulse:focus .hvr-icon, .hvr-icon-pulse:active .hvr-icon {
|
||
|
|
-webkit-animation-name: hvr-icon-pulse;
|
||
|
|
animation-name: hvr-icon-pulse;
|
||
|
|
-webkit-animation-duration: 1s;
|
||
|
|
animation-duration: 1s;
|
||
|
|
-webkit-animation-timing-function: linear;
|
||
|
|
animation-timing-function: linear;
|
||
|
|
-webkit-animation-iteration-count: infinite;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
}
|