54 lines
809 B
SCSS
54 lines
809 B
SCSS
.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)
|
|
}
|
|
} |