mitjajez/SONCE

View on GitHub
imports/ui/stylesheets/animation.less

Summary

Maintainability
Test Coverage
/*
   Animation example, for spinners
*/
.animate-spin {
  animation: spin 2s infinite linear;
  display: inline-block;
}

.animate-pulse {
  animation: pulse 2s infinite linear;
}

.animate-radius {
  animation: radius 2s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}

@keyframes pulse {
  0% {
    opacity: .1;
  }

  50% {
    opacity: .3;
  }

  100% {
    opacity: .1;
  }
}

@keyframes radius {
  0% {
    r: 4;
  }

  50% {
    r: 5;
  }

  100% {
    r: 4;
  }
}