quasar/src/css/core/animations.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

/*
 * Animate.css additions
 */

.animated
  animation-duration: .3s
  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: .3s

/*
 * Quasar animations
 */

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

@keyframes q-scale
  0%
    transform: scale(1)
  50%
    transform: scale(1.04)
  100%
    transform: scale(1)

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

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