orgen-theme/assets/scss/custom/utilities/_floating.scss
2023-04-06 16:58:33 +08:00

54 lines
809 B
PHP

.floating {
animation: floating 3s ease infinite;
will-change: transform;
&:hover {
animation-play-state: paused;
}
}
.floating-lg {
animation: floating-lg 3s ease infinite;
}
.floating-sm {
animation: floating-sm 3s ease infinite;
}
// Keyframes
@keyframes floating-lg {
0% {
transform: translateY(0px)
}
50% {
transform: translateY(15px)
}
100% {
transform: translateY(0px)
}
}
@keyframes floating {
0% {
transform: translateY(0px)
}
50% {
transform: translateY(10px)
}
100% {
transform: translateY(0px)
}
}
@keyframes floating-sm {
0% {
transform: translateY(0px)
}
50% {
transform: translateY(5px)
}
100% {
transform: translateY(0px)
}
}