quasar
Version:
Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
91 lines (67 loc) • 1.88 kB
text/stylus
/*
* Animate.css additions
* Adapted from: https://github.com/animate-css/animate.css/blob/6828621a01e145119db6194dc9b4d37325b48aa5/source/_base.css
*/
:root
--animate-duration: $animate-duration
--animate-delay: $animate-delay
--animate-repeat: $animate-repeat
.animated
animation-duration: var(--animate-duration)
animation-fill-mode: both
&.infinite
animation-iteration-count: infinite
// Last seen on v3.5.2
&.hinge
animation-duration: 2s
&.repeat-1
animation-iteration-count: var(--animate-repeat)
&.repeat-2
animation-iteration-count: calc(var(--animate-repeat) * 2)
&.repeat-3
animation-iteration-count: calc(var(--animate-repeat) * 3)
&.delay-1s
animation-delay: var(--animate-delay)
&.delay-2s
animation-delay: calc(var(--animate-delay) * 2)
&.delay-3s
animation-delay: calc(var(--animate-delay) * 3)
&.delay-4s
animation-delay: calc(var(--animate-delay) * 4)
&.delay-5s
animation-delay: calc(var(--animate-delay) * 5)
&.faster
animation-duration: calc(var(--animate-duration) / 2)
&.fast
animation-duration: calc(var(--animate-duration) * 0.8)
&.slow
animation-duration: calc(var(--animate-duration) * 2)
&.slower
animation-duration: calc(var(--animate-duration) * 3)
@media print, (prefers-reduced-motion: reduce)
.animated
animation-duration: 1ms
transition-duration: 1ms
animation-iteration-count: 1
.animated[class*='Out']
opacity: 0
/*
* 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