quasar/src/css/core/motion.styl at v0.17 · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
@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