diff options
Diffstat (limited to 'www/packages/fontawesome-free/scss/_animated.scss')
| -rw-r--r-- | www/packages/fontawesome-free/scss/_animated.scss | 727 |
1 files changed, 727 insertions, 0 deletions
diff --git a/www/packages/fontawesome-free/scss/_animated.scss b/www/packages/fontawesome-free/scss/_animated.scss new file mode 100644 index 0000000..f230531 --- /dev/null +++ b/www/packages/fontawesome-free/scss/_animated.scss @@ -0,0 +1,727 @@ +// animating icons +// -------------------------- +@use 'variables' as v; + +.#{v.$css-prefix}-beat { + animation-name: #{v.$css-prefix}-beat; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out); +} + +.#{v.$css-prefix}-bounce { + animation-name: #{v.$css-prefix}-bounce; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); +} + +.#{v.$css-prefix}-fade { + animation-name: #{v.$css-prefix}-fade; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out); +} + +.#{v.$css-prefix}-beat-fade { + animation-name: #{v.$css-prefix}-beat-fade; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out); +} + +.#{v.$css-prefix}-flip { + animation-name: #{v.$css-prefix}-flip; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 1.5s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out); +} + +.#{v.$css-prefix}-flip-360 { + animation-name: #{v.$css-prefix}-flip-360; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out); +} + +.#{v.$css-prefix}-shake { + animation-name: #{v.$css-prefix}-shake; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 0.75s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out); +} + +.#{v.$css-prefix}-spin { + animation-name: #{v.$css-prefix}-spin; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 2s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, linear); +} + +.#{v.$css-prefix}-spin-reverse { + --#{v.$css-prefix}-animation-direction: reverse; +} + +.#{v.$css-prefix}-pulse, +.#{v.$css-prefix}-spin-pulse { + animation-name: #{v.$css-prefix}-spin; + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 1s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, steps(8)); +} + +.#{v.$css-prefix}-spin-snap { + animation-name: #{v.$css-prefix}-spin-snap; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 3s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, linear); +} + +.#{v.$css-prefix}-spin-snap-4 { + animation-name: #{v.$css-prefix}-spin-snap-4; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 2.4s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, linear); +} + +.#{v.$css-prefix}-spin-snap-8 { + animation-name: #{v.$css-prefix}-spin-snap-8; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 4s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, linear); +} + +.#{v.$css-prefix}-buzz { + animation-name: #{v.$css-prefix}-buzz; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 0.6s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, linear); +} + +.#{v.$css-prefix}-wag { + animation-name: #{v.$css-prefix}-wag; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 0.9s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-out); + transform-origin: bottom center; +} + +.#{v.$css-prefix}-float { + animation-name: #{v.$css-prefix}-float; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 3s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-in-out); + will-change: transform; +} + +.#{v.$css-prefix}-swing { + animation-name: #{v.$css-prefix}-swing; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 1.2s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-out); + transform-origin: top center; +} + +.#{v.$css-prefix}-jello { + animation-name: #{v.$css-prefix}-jello; + animation-delay: var(--#{v.$css-prefix}-animation-delay, 0s); + animation-direction: var(--#{v.$css-prefix}-animation-direction, normal); + animation-duration: var(--#{v.$css-prefix}-animation-duration, 0.9s); + animation-iteration-count: var(--#{v.$css-prefix}-animation-iteration-count, infinite); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing, ease-out); +} + +// if agent or operating system prefers reduced motion, disable animations +// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/ +// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion +@media (prefers-reduced-motion: reduce) { + .#{v.$css-prefix}-beat, + .#{v.$css-prefix}-bounce, + .#{v.$css-prefix}-fade, + .#{v.$css-prefix}-beat-fade, + .#{v.$css-prefix}-flip, + .#{v.$css-prefix}-flip-360, + .#{v.$css-prefix}-pulse, + .#{v.$css-prefix}-shake, + .#{v.$css-prefix}-spin, + .#{v.$css-prefix}-spin-pulse, + .#{v.$css-prefix}-buzz, + .#{v.$css-prefix}-float, + .#{v.$css-prefix}-jello, + .#{v.$css-prefix}-spin-snap, + .#{v.$css-prefix}-spin-snap-4, + .#{v.$css-prefix}-spin-snap-8, + .#{v.$css-prefix}-swing, + .#{v.$css-prefix}-wag { + animation: none !important; + transition: none !important; + } +} + +@keyframes #{v.$css-prefix}-beat { + 0% { + transform: scale(1); + } + 25% { + transform: scale(calc(1.25 * var(--#{v.$css-prefix}-beat-scale, 1.25))); + } + 45% { + transform: scale(calc(1.22 * var(--#{v.$css-prefix}-beat-scale, 1.22))); + } + 65% { + transform: scale(calc(1.25 * var(--#{v.$css-prefix}-beat-scale, 1.25))); + } + 90% { + transform: scale(1); + } +} + +@keyframes #{v.$css-prefix}-bounce { + 0% { + transform: scale(1, 1) translateY(0); + animation-timing-function: var(--#{v.$css-prefix}-animation-timing); + } + 14% { + transform: scale(var(--#{v.$css-prefix}-bounce-start-scale-x, 1.06), var(--#{v.$css-prefix}-bounce-start-scale-y, 0.94)) + translateY(var(--#{v.$css-prefix}-bounce-anticipation, 3px)); + animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); + } + 32% { + transform: scale(var(--#{v.$css-prefix}-bounce-jump-scale-x, 0.94), var(--#{v.$css-prefix}-bounce-jump-scale-y, 1.12)) + translateY(calc(-1 * var(--#{v.$css-prefix}-bounce-height, 0.5em))); + animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); + } + 52% { + transform: scale(1, 1) translateY(calc(-1 * var(--#{v.$css-prefix}-bounce-height, 0.5em) * 1.1)); + animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); + } + 70% { + transform: scale(var(--#{v.$css-prefix}-bounce-land-scale-x, 1.06), var(--#{v.$css-prefix}-bounce-land-scale-y, 0.92)) translateY(0); + animation-timing-function: cubic-bezier(0.33, 0.33, 0.66, 1); + } + 85% { + transform: scale(0.98, 1.04) translateY(calc(-2px * var(--#{v.$css-prefix}-bounce-rebound, 1))); + animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1); + } + 100% { + transform: scale(1, 1) translateY(0); + } +} + +@keyframes #{v.$css-prefix}-fade { + 0% { + opacity: 1; + transform: scale(1); + animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); + } + 40% { + opacity: var(--#{v.$css-prefix}-fade-opacity, 0.4); + transform: scale(0.98); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +@keyframes #{v.$css-prefix}-beat-fade { + 0% { + opacity: var(--#{v.$css-prefix}-beat-fade-opacity, 0.4); + transform: scale(1); + animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); + } + 25% { + opacity: calc(var(--#{v.$css-prefix}-beat-fade-opacity, 0.4) + 0.4); + transform: scale(var(--#{v.$css-prefix}-beat-fade-scale, 1.28)); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + } + 45% { + opacity: 1; + transform: scale(var(--#{v.$css-prefix}-beat-fade-scale, 1.25)); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + 65% { + opacity: calc(var(--#{v.$css-prefix}-beat-fade-opacity, 0.4) + 0.4); + transform: scale(var(--#{v.$css-prefix}-beat-fade-scale, 1.28)); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + } + 100% { + opacity: var(--#{v.$css-prefix}-beat-fade-opacity, 0.4); + transform: scale(1); + } +} + +@keyframes #{v.$css-prefix}-flip { + 0% { + transform: perspective(2em) scale(1) rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), 0deg); + animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); + } + 8% { + transform: perspective(2em) scale(var(--#{v.$css-prefix}-flip-anticipation-scale, 0.95)) + rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), 0deg); + animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); + } + 35% { + transform: perspective(2em) scale(1) + rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), calc(var(--#{v.$css-prefix}-flip-angle, -360deg) * 0.6)); + animation-timing-function: linear; + } + 65% { + transform: perspective(2em) scale(1) + rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), calc(var(--#{v.$css-prefix}-flip-angle, -360deg) * 0.5)); + animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); + } + 92% { + transform: perspective(2em) scale(1) + rotate3d( + var(--#{v.$css-prefix}-flip-x, 0), + var(--#{v.$css-prefix}-flip-y, 1), + var(--#{v.$css-prefix}-flip-z, 0), + calc(var(--#{v.$css-prefix}-flip-angle, -360deg) * var(--#{v.$css-prefix}-flip-overshoot, 1.04)) + ); + animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1); + } + 100% { + transform: perspective(2em) scale(1) + rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), var(--#{v.$css-prefix}-flip-angle, -360deg)); + } +} + +@keyframes #{v.$css-prefix}-flip-360 { + 0% { + transform: perspective(2em) scale(1) rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), 0deg); + animation-timing-function: cubic-bezier(0.2, 0, 0.4, 1); + } + 8% { + transform: perspective(2em) scale(var(--#{v.$css-prefix}-flip-anticipation-scale, 0.95)) rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), 0deg); + animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); + } + 50% { + transform: perspective(2em) scale(1) rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), calc(var(--#{v.$css-prefix}-flip-angle, -360deg) * 0.6)); + animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); + } + 80% { + transform: perspective(2em) scale(1) rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), calc(var(--#{v.$css-prefix}-flip-angle, -360deg) * var(--#{v.$css-prefix}-flip-overshoot, 1.04))); + animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1); + } + 100% { + transform: perspective(2em) scale(1) rotate3d(var(--#{v.$css-prefix}-flip-x, 0), var(--#{v.$css-prefix}-flip-y, 1), var(--#{v.$css-prefix}-flip-z, 0), var(--#{v.$css-prefix}-flip-angle, -360deg)); + } +} + +@keyframes #{v.$css-prefix}-shake { + 0% { + transform: rotate(0deg); + animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1); + } + 8% { + transform: rotate(35deg) translateX(1px); + animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1); + } + 20% { + transform: rotate(-22deg) translateX(-1px); + animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1); + } + 35% { + transform: rotate(15deg) translateX(1px); + animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1); + } + 50% { + transform: rotate(-9deg); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + } + 65% { + transform: rotate(5deg); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + } + 78% { + transform: rotate(-3deg); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + } + 90% { + transform: rotate(1deg); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + 100% { + transform: rotate(0deg); + } +} + +@keyframes #{v.$css-prefix}-spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +@keyframes #{v.$css-prefix}-spin-snap { + 0% { + transform: rotate(0deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 12% { + transform: rotate(60deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 16.67% { + transform: rotate(60deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 28.67% { + transform: rotate(120deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 33.33% { + transform: rotate(120deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 45.33% { + transform: rotate(180deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 50% { + transform: rotate(180deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 62% { + transform: rotate(240deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 66.67% { + transform: rotate(240deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 78.67% { + transform: rotate(300deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 83.33% { + transform: rotate(300deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 95.33% { + transform: rotate(360deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes #{v.$css-prefix}-spin-snap-4 { + 0% { + transform: rotate(0deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 15% { + transform: rotate(90deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 25% { + transform: rotate(90deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 40% { + transform: rotate(180deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 50% { + transform: rotate(180deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 65% { + transform: rotate(270deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 75% { + transform: rotate(270deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 90% { + transform: rotate(360deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes #{v.$css-prefix}-spin-snap-8 { + 0% { + transform: rotate(0deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 9% { + transform: rotate(45deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 12.5% { + transform: rotate(45deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 21.5% { + transform: rotate(90deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 25% { + transform: rotate(90deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 34% { + transform: rotate(135deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 37.5% { + transform: rotate(135deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 46.5% { + transform: rotate(180deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 50% { + transform: rotate(180deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 59% { + transform: rotate(225deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 62.5% { + transform: rotate(225deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 71.5% { + transform: rotate(270deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 75% { + transform: rotate(270deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 84% { + transform: rotate(315deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 87.5% { + transform: rotate(315deg); + animation-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + 96.5% { + transform: rotate(360deg); + animation-timing-function: cubic-bezier(0.8, 0, 1, 1); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes #{v.$css-prefix}-buzz { + 0% { + transform: translateX(0) rotate(0deg); + animation-timing-function: cubic-bezier(0.1, 0, 0.9, 1); + } + 5% { + transform: translateX(var(--#{v.$css-prefix}-buzz-distance, 4px)) rotate(0.5deg); + } + 10% { + transform: translateX(calc(-1 * var(--#{v.$css-prefix}-buzz-distance, 4px))) rotate(-0.5deg); + } + 15% { + transform: translateX(var(--#{v.$css-prefix}-buzz-distance, 4px)) rotate(0.3deg); + } + 20% { + transform: translateX(calc(-1 * var(--#{v.$css-prefix}-buzz-distance, 4px))) rotate(-0.3deg); + } + 25% { + transform: translateX(calc(var(--#{v.$css-prefix}-buzz-distance, 4px) * 0.7)) rotate(0.2deg); + } + 30% { + transform: translateX(calc(-1 * var(--#{v.$css-prefix}-buzz-distance, 4px) * 0.7)) rotate(-0.2deg); + } + 35% { + transform: translateX(calc(var(--#{v.$css-prefix}-buzz-distance, 4px) * 0.4)) rotate(0.1deg); + } + 40% { + transform: translateX(0) rotate(0deg); + } + 100% { + transform: translateX(0) rotate(0deg); + } +} + +@keyframes #{v.$css-prefix}-wag { + 0% { + transform: rotate(0deg); + animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); + } + 12% { + transform: rotate(var(--#{v.$css-prefix}-wag-angle, 12deg)); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + 24% { + transform: rotate(2deg); + animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); + } + 36% { + transform: rotate(calc(var(--#{v.$css-prefix}-wag-angle, 12deg) * 0.85)); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + 48% { + transform: rotate(1deg); + animation-timing-function: cubic-bezier(0.2, 0, 0.6, 1); + } + 58% { + transform: rotate(calc(var(--#{v.$css-prefix}-wag-angle, 12deg) * 0.6)); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + 68% { + transform: rotate(0deg); + } + 100% { + transform: rotate(0deg); + } +} + +@keyframes #{v.$css-prefix}-float { + 0% { + transform: translateY(0) translateX(0) rotate(0deg) + scale(var(--#{v.$css-prefix}-float-squash-x, 1.02), var(--#{v.$css-prefix}-float-squash-y, 0.98)); + animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); + } + 15% { + transform: translateY(calc(-0.4 * var(--#{v.$css-prefix}-float-height, 6px))) translateX(var(--#{v.$css-prefix}-float-drift, 1px)) + rotate(var(--#{v.$css-prefix}-float-tilt, 1deg)) scale(1, 1); + animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); + } + 35% { + transform: translateY(calc(-1 * var(--#{v.$css-prefix}-float-height, 6px))) translateX(0) rotate(0deg) + scale(var(--#{v.$css-prefix}-float-stretch-x, 0.98), var(--#{v.$css-prefix}-float-stretch-y, 1.03)); + animation-timing-function: cubic-bezier(0.5, 0, 0.5, 0); + } + 50% { + transform: translateY(calc(-0.92 * var(--#{v.$css-prefix}-float-height, 6px))) translateX(calc(-0.5 * var(--#{v.$css-prefix}-float-drift, 1px))) + rotate(calc(-0.5 * var(--#{v.$css-prefix}-float-tilt, 1deg))) scale(0.995, 1.01); + animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33); + } + 70% { + transform: translateY(calc(-0.3 * var(--#{v.$css-prefix}-float-height, 6px))) translateX(calc(-1 * var(--#{v.$css-prefix}-float-drift, 1px))) + rotate(calc(-1 * var(--#{v.$css-prefix}-float-tilt, 1deg))) scale(1, 1); + animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); + } + 90% { + transform: translateY(calc(0.05 * var(--#{v.$css-prefix}-float-height, 6px))) translateX(0) rotate(0deg) + scale(var(--#{v.$css-prefix}-float-squash-x, 1.02), var(--#{v.$css-prefix}-float-squash-y, 0.98)); + animation-timing-function: cubic-bezier(0.33, 0, 0.66, 1); + } + 100% { + transform: translateY(0) translateX(0) rotate(0deg) + scale(var(--#{v.$css-prefix}-float-squash-x, 1.02), var(--#{v.$css-prefix}-float-squash-y, 0.98)); + } +} + +@keyframes #{v.$css-prefix}-swing { + 0% { + transform: rotate(0deg); + animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1); + } + 8% { + transform: rotate(var(--#{v.$css-prefix}-swing-angle, 22deg)); + animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1); + } + 18% { + transform: rotate(calc(-1 * var(--#{v.$css-prefix}-swing-angle, 22deg) * 0.85)); + animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1); + } + 28% { + transform: rotate(calc(var(--#{v.$css-prefix}-swing-angle, 22deg) * 0.65)); + animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1); + } + 38% { + transform: rotate(calc(-1 * var(--#{v.$css-prefix}-swing-angle, 22deg) * 0.45)); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + } + 48% { + transform: rotate(calc(var(--#{v.$css-prefix}-swing-angle, 22deg) * 0.25)); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + } + 56% { + transform: rotate(calc(-1 * var(--#{v.$css-prefix}-swing-angle, 22deg) * 0.1)); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + } + 64% { + transform: rotate(0deg); + } + 100% { + transform: rotate(0deg); + } +} + +@keyframes #{v.$css-prefix}-jello { + 0% { + transform: scale(1, 1); + animation-timing-function: cubic-bezier(0.2, 0, 0.8, 1); + } + 12% { + transform: scale(var(--#{v.$css-prefix}-jello-scale-x, 1.15), calc(2 - var(--#{v.$css-prefix}-jello-scale-x, 1.15))); + animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1); + } + 24% { + transform: scale(calc(2 - var(--#{v.$css-prefix}-jello-scale-y, 1.12)), var(--#{v.$css-prefix}-jello-scale-y, 1.12)); + animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1); + } + 36% { + transform: scale( + calc(1 + (var(--#{v.$css-prefix}-jello-scale-x, 1.15) - 1) * 0.5), + calc(2 - (1 + (var(--#{v.$css-prefix}-jello-scale-x, 1.15) - 1) * 0.5)) + ); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + } + 48% { + transform: scale( + calc(2 - (1 + (var(--#{v.$css-prefix}-jello-scale-y, 1.12) - 1) * 0.3)), + calc(1 + (var(--#{v.$css-prefix}-jello-scale-y, 1.12) - 1) * 0.3) + ); + animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); + } + 58% { + transform: scale(1.02, 0.98); + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + } + 68% { + transform: scale(1, 1); + } + 100% { + transform: scale(1, 1); + } +} |