quasar-framework/src/css/core/motion.styl

Build responsive SPA, SSR, PWA, Hybrid Mobile Apps and Electron apps, all simultaneously using the same codebase

@keyframes q-highlight
  0%
    background $lime-6
  100%
    background transparent

.highlight-and-fade
  animation q-highlight 2s /* rtl:ignore */

@keyframes q-rotate
  0%
    transform rotate(0) /* rtl:ignore */
  25%
    transform rotate(90deg) /* rtl:ignore */
  50%
    transform rotate(180deg) /* rtl:ignore */
  75%
    transform rotate(270deg) /* rtl:ignore */
  100%
    transform rotate(360deg) /* rtl:ignore */

.transition-generic
  transition all .3s

.animate-spin, .animate-spin-reverse
  animation q-spin 2s infinite linear /* rtl:ignore */
.animate-spin-reverse
  animation-direction reverse
.animate-blink
  animation q-blink 1s steps(5, start) infinite /* rtl:ignore */
.animate-pop
  animation q-pop .2s /* rtl:ignore */
.animate-scale
  animation q-scale .2s /* rtl:ignore */
.animate-fade
  animation q-fade .2s /* rtl:ignore */
.animate-bounce
  animation q-bounce 2s infinite /* rtl:ignore */

.animate-shake
  animation q-shake .15s
  animation-timing-function cubic-bezier(.25, .8, .25, 1)

@keyframes q-blink
  to
    visibility hidden

@keyframes q-spin
  0%
    transform rotate(0deg) /* rtl:ignore */
  100%
    transform rotate(359deg) /* rtl:ignore */

@keyframes q-pop
  0%
    opacity 0
    transform scale(.7)
  70%
    opacity 1
    transform scale(1.07)
  100%
    transform scale(1)

@keyframes q-fade
  0%
    opacity 0
  100%
    opacity 1

@keyframes q-scale
  0%
    opacity 0
    transform scale(.7)
  100%
    opacity 1
    transform scale(1)

@keyframes q-bounce
  0%, 20%, 50%, 80%, 100%
    transform translateY(0)
  40%
    transform translateY(-30px)
  60%
    transform translateY(-15px)

@keyframes q-shake
  0%
    transform scale(1)
  50%
    transform scale(1.02)
  100%
    transform scale(1)

.animate-popup-up, .animate-popup-down
  animation-timing-function cubic-bezier(0.23, 1, 0.32, 1)
  > *
    animation q-fade .82s cubic-bezier(.785, .135, .15, .86)
.animate-popup-down
  animation q-popup-down .36s /* rtl:ignore */
  transform-origin left top 0px /* rtl:ignore */
.animate-popup-up
  animation q-popup-up .36s /* rtl:ignore */
  transform-origin left bottom 0px /* rtl:ignore */

@keyframes q-popup-down
  0%
    opacity 0
    transform translateY(-10px) scaleY(.3)
    pointer-events none
  30%
    opacity 1

@keyframes q-popup-up
  0%
    opacity 0
    transform translateY(10px) scaleY(.3)
    pointer-events none
  30%
    opacity 1

.animate-fade-left
  animation q-fade .36s cubic-bezier(.785, .135, .15, .86), q-slide-left .36s ease
.animate-fade-right
  animation q-fade .36s cubic-bezier(.785, .135, .15, .86), q-slide-right .36s ease

@keyframes q-slide-left
  0%
    transform translateX(-70%)

@keyframes q-slide-right
  0%
    transform translateX(70%)

.animated
  animation-duration 1s
  animation-fill-mode both

.animated.infinite
  animation-iteration-count infinite
.animated.hinge
  animation-duration 2s

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut
  animation-duration .75s