thingsboard/ui/node_modules/compass-sass-mixins/lib/animation/animate/_attention-seekers.sass

// ---------------------------------------------------------------------------
+keyframes(flash)
  0%
    opacity: 1
  25%
    opacity: 0
  50%
    opacity: 1
  75%
    opacity: 0
  100%
    opacity: 1


// ---------------------------------------------------------------------------
+keyframes(bounce)
  0%
    +translateY(0)
  20%
    +translateY(0)
  40%
    +translateY(-30px)
  50%
    +translateY(0)
  60%
    +translateY(-15px)
  80%
    +translateY(0)
  100%
    +translateY(0)


// ---------------------------------------------------------------------------
+keyframes(shake)
  0%
    +translateX(0)
  10%
    +translateX(-10px)
  20%
    +translateX(10px)
  30%
    +translateX(-10px)
  40%
    +translateX(10px)
  50%
    +translateX(-10px)
  60%
    +translateX(10px)
  70%
    +translateX(-10px)
  80%
    +translateX(10px)
  90%
    +translateX(-10px)
  100%
    +translateX(0)


// ---------------------------------------------------------------------------
+keyframes(tada)
  0%
    +scale(1)
  10%
    +transform(scale(0.9) rotate(-3deg))
  20%
    +transform(scale(0.9) rotate(-3deg))
  30%
    +transform(scale(1.1) rotate(3deg))
  40%
    +transform(scale(1.1) rotate(-3deg))
  50%
    +transform(scale(1.1) rotate(3deg))
  60%
    +transform(scale(1.1) rotate(-3deg))
  70%
    +transform(scale(1.1) rotate(3deg))
  80%
    +transform(scale(1.1) rotate(-3deg))
  90%
    +transform(scale(1.1) rotate(3deg))
  100%
    +transform(scale(1) rotate(0))


// ---------------------------------------------------------------------------
+keyframes(swing)
  20%, 40%, 60%, 80%, 100%
    +transform-origin(top center)
  20%
    +rotate(15deg)
  40%
    +rotate(-10deg)
  60%
    +rotate(5deg)
  80%
    +rotate(-5deg)
  100%
    +rotate(0deg)


// ---------------------------------------------------------------------------
+keyframes(wobble)
  0%
    +translateX(0%)
  15%
    +transform(translateX(-25%) rotate(-5deg))
  30%
    +transform(translateX(20%) rotate(3deg))
  45%
    +transform(translateX(-15%) rotate(-3deg))
  60%
    +transform(translateX(10%) rotate(2deg))
  75%
    +transform(translateX(-5%) rotate(-1deg))
  100%
    +transform(translateX(0%))


// ---------------------------------------------------------------------------
+keyframes(pulse)
  0%
    +scale(1)
  50%
    +scale(1.1)
  100%
    +scale(1)


// ---------------------------------------------------------------------------
+keyframes(wiggle)
  0%
    +skewX(9deg)
  10%
    +skewX(-8deg)
  20%
    +skewX(7deg)
  30%
    +skewX(-6deg)
  40%
    +skewX(5deg)
  50%
    +skewX(-4deg)
  60%
    +skewX(3deg)
  70%
    +skewX(-2deg)
  80%
    +skewX(1deg)
  90%
    +skewX(0deg)
  100%
    +skewX(0deg)