ball-pulse-sync.scss 644 B

123456789101112131415161718192021222324252627282930313233343536
  1. @import '../variables';
  2. @import '../mixins';
  3. @import '../functions';
  4. $amount: 10px;
  5. @keyframes ball-pulse-sync {
  6. 33% {
  7. transform: translateY($amount);
  8. }
  9. 66% {
  10. transform: translateY(-$amount);
  11. }
  12. 100% {
  13. transform: translateY(0);
  14. }
  15. }
  16. @mixin ball-pulse-sync($n: 3, $start: 1) {
  17. @for $i from $start through $n {
  18. > div:nth-child(#{$i}) {
  19. animation: ball-pulse-sync 0.6s delay(0.07s, $n, $i) infinite ease-in-out;
  20. }
  21. }
  22. }
  23. .ball-pulse-sync {
  24. @include ball-pulse-sync();
  25. > div {
  26. @include balls();
  27. @include global-animation();
  28. display: inline-block;
  29. }
  30. }