Mauricio Cattafi / autoservicio

Download as
Browse Code ยป

Commit 264e5848c819824ec83307f56becfcb9cb49265f

Authored by Marcelo Puebla
1 parent ac145dc6a6
Exists in master and in 1 other branch validar_pve

agregada animacion

Showing 1 changed file with 65 additions and 0 deletions   Show diff stats
src/assets/scss/animation.scss
Diff comments   View file @ 264e584
1 .fade-in { 1 .fade-in {
2 -webkit-animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; 2 -webkit-animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
3 animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; 3 animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
4 } 4 }
5 5
6 @-webkit-keyframes fadein { 6 @-webkit-keyframes fadein {
7 0% { 7 0% {
8 -webkit-transform: translateZ(80px); 8 -webkit-transform: translateZ(80px);
9 transform: translateZ(80px); 9 transform: translateZ(80px);
10 opacity: 0; 10 opacity: 0;
11 } 11 }
12 100% { 12 100% {
13 -webkit-transform: translateZ(0); 13 -webkit-transform: translateZ(0);
14 transform: translateZ(0); 14 transform: translateZ(0);
15 opacity: 1; 15 opacity: 1;
16 } 16 }
17 } 17 }
18 18
19 @keyframes fadein { 19 @keyframes fadein {
20 0% { 20 0% {
21 -webkit-transform: translateZ(80px); 21 -webkit-transform: translateZ(80px);
22 transform: translateZ(80px); 22 transform: translateZ(80px);
23 opacity: 0; 23 opacity: 0;
24 } 24 }
25 100% { 25 100% {
26 -webkit-transform: translateZ(0); 26 -webkit-transform: translateZ(0);
27 transform: translateZ(0); 27 transform: translateZ(0);
28 opacity: 1; 28 opacity: 1;
29 } 29 }
30 } 30 }
31 31
32 .fade-right { 32 .fade-right {
33 animation: faderight 1s; 33 animation: faderight 1s;
34 -moz-animation: faderight 1s; /* Firefox */ 34 -moz-animation: faderight 1s; /* Firefox */
35 -webkit-animation: faderight 1s; /* Safari and Chrome */ 35 -webkit-animation: faderight 1s; /* Safari and Chrome */
36 -o-animation: faderight 1s; /* Opera */ 36 -o-animation: faderight 1s; /* Opera */
37 } 37 }
38 38
39 @keyframes faderight { 39 @keyframes faderight {
40 from { 40 from {
41 opacity: 0; 41 opacity: 0;
42 transform: translateX(-20px); 42 transform: translateX(-20px);
43 } 43 }
44 to { 44 to {
45 opacity: 1; 45 opacity: 1;
46 transform: translateX(0); 46 transform: translateX(0);
47 } 47 }
48 } 48 }
49 49
50 @-moz-keyframes faderight { 50 @-moz-keyframes faderight {
51 /* Firefox */ 51 /* Firefox */
52 from { 52 from {
53 opacity: 0; 53 opacity: 0;
54 -moz-transform: translateX(-20px); 54 -moz-transform: translateX(-20px);
55 } 55 }
56 to { 56 to {
57 opacity: 1; 57 opacity: 1;
58 -moz-transform: translateX(0); 58 -moz-transform: translateX(0);
59 } 59 }
60 } 60 }
61 61
62 @-webkit-keyframes faderight { 62 @-webkit-keyframes faderight {
63 /* Safari and Chrome */ 63 /* Safari and Chrome */
64 from { 64 from {
65 opacity: 0; 65 opacity: 0;
66 -webkit-transform: translateX(-20px); 66 -webkit-transform: translateX(-20px);
67 } 67 }
68 to { 68 to {
69 opacity: 1; 69 opacity: 1;
70 -webkit-transform: translateX(0); 70 -webkit-transform: translateX(0);
71 } 71 }
72 } 72 }
73 73
74 .fade-left { 74 .fade-left {
75 -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 75 -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
76 animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 76 animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
77 } 77 }
78 78
79 @-webkit-keyframes fadeleft { 79 @-webkit-keyframes fadeleft {
80 0% { 80 0% {
81 -webkit-transform: scaleX(0); 81 -webkit-transform: scaleX(0);
82 transform: scaleX(0); 82 transform: scaleX(0);
83 -webkit-transform-origin: 100% 100%; 83 -webkit-transform-origin: 100% 100%;
84 transform-origin: 100% 100%; 84 transform-origin: 100% 100%;
85 opacity: 1; 85 opacity: 1;
86 } 86 }
87 100% { 87 100% {
88 -webkit-transform: scaleX(1); 88 -webkit-transform: scaleX(1);
89 transform: scaleX(1); 89 transform: scaleX(1);
90 -webkit-transform-origin: 100% 100%; 90 -webkit-transform-origin: 100% 100%;
91 transform-origin: 100% 100%; 91 transform-origin: 100% 100%;
92 opacity: 1; 92 opacity: 1;
93 } 93 }
94 } 94 }
95 95
96 @keyframes fadeleft { 96 @keyframes fadeleft {
97 0% { 97 0% {
98 -webkit-transform: scaleX(0); 98 -webkit-transform: scaleX(0);
99 transform: scaleX(0); 99 transform: scaleX(0);
100 -webkit-transform-origin: 100% 100%; 100 -webkit-transform-origin: 100% 100%;
101 transform-origin: 100% 100%; 101 transform-origin: 100% 100%;
102 opacity: 1; 102 opacity: 1;
103 } 103 }
104 100% { 104 100% {
105 -webkit-transform: scaleX(1); 105 -webkit-transform: scaleX(1);
106 transform: scaleX(1); 106 transform: scaleX(1);
107 -webkit-transform-origin: 100% 100%; 107 -webkit-transform-origin: 100% 100%;
108 transform-origin: 100% 100%; 108 transform-origin: 100% 100%;
109 opacity: 1; 109 opacity: 1;
110 } 110 }
111 } 111 }
112 112
113 .fade-bottom { 113 .fade-bottom {
114 -webkit-animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; 114 -webkit-animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
115 animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; 115 animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
116 } 116 }
117 117
118 @-webkit-keyframes fade-bottom { 118 @-webkit-keyframes fade-bottom {
119 0% { 119 0% {
120 -webkit-transform: scaleY(0.4); 120 -webkit-transform: scaleY(0.4);
121 transform: scaleY(0.4); 121 transform: scaleY(0.4);
122 -webkit-transform-origin: 100% 0%; 122 -webkit-transform-origin: 100% 0%;
123 transform-origin: 100% 0%; 123 transform-origin: 100% 0%;
124 } 124 }
125 100% { 125 100% {
126 -webkit-transform: scaleY(1); 126 -webkit-transform: scaleY(1);
127 transform: scaleY(1); 127 transform: scaleY(1);
128 -webkit-transform-origin: 100% 0%; 128 -webkit-transform-origin: 100% 0%;
129 transform-origin: 100% 0%; 129 transform-origin: 100% 0%;
130 } 130 }
131 } 131 }
132 132
133 @keyframes fade-bottom { 133 @keyframes fade-bottom {
134 0% { 134 0% {
135 -webkit-transform: scaleY(0.4); 135 -webkit-transform: scaleY(0.4);
136 transform: scaleY(0.4); 136 transform: scaleY(0.4);
137 -webkit-transform-origin: 100% 0%; 137 -webkit-transform-origin: 100% 0%;
138 transform-origin: 100% 0%; 138 transform-origin: 100% 0%;
139 } 139 }
140 100% { 140 100% {
141 -webkit-transform: scaleY(1); 141 -webkit-transform: scaleY(1);
142 transform: scaleY(1); 142 transform: scaleY(1);
143 -webkit-transform-origin: 100% 0%; 143 -webkit-transform-origin: 100% 0%;
144 transform-origin: 100% 0%; 144 transform-origin: 100% 0%;
145 } 145 }
146 } 146 }
147 147
148 .slide-in-bl { 148 .slide-in-bl {
149 -webkit-animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 149 -webkit-animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
150 animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 150 animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
151 } 151 }
152 152
153 @-webkit-keyframes slide-in-bl { 153 @-webkit-keyframes slide-in-bl {
154 0% { 154 0% {
155 -webkit-transform: translateY(1000px) translateX(-1000px); 155 -webkit-transform: translateY(1000px) translateX(-1000px);
156 transform: translateY(1000px) translateX(-1000px); 156 transform: translateY(1000px) translateX(-1000px);
157 opacity: 0; 157 opacity: 0;
158 } 158 }
159 100% { 159 100% {
160 -webkit-transform: translateY(0) translateX(0); 160 -webkit-transform: translateY(0) translateX(0);
161 transform: translateY(0) translateX(0); 161 transform: translateY(0) translateX(0);
162 opacity: 1; 162 opacity: 1;
163 } 163 }
164 } 164 }
165 165
166 @keyframes slide-in-bl { 166 @keyframes slide-in-bl {
167 0% { 167 0% {
168 -webkit-transform: translateY(1000px) translateX(-1000px); 168 -webkit-transform: translateY(1000px) translateX(-1000px);
169 transform: translateY(1000px) translateX(-1000px); 169 transform: translateY(1000px) translateX(-1000px);
170 opacity: 0; 170 opacity: 0;
171 } 171 }
172 100% { 172 100% {
173 -webkit-transform: translateY(0) translateX(0); 173 -webkit-transform: translateY(0) translateX(0);
174 transform: translateY(0) translateX(0); 174 transform: translateY(0) translateX(0);
175 opacity: 1; 175 opacity: 1;
176 } 176 }
177 } 177 }
178 178
179 .heartbeat { 179 .heartbeat {
180 -webkit-animation: heartbeat 1.5s ease-in-out infinite both; 180 -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
181 animation: heartbeat 1.5s ease-in-out infinite both; 181 animation: heartbeat 1.5s ease-in-out infinite both;
182 } 182 }
183 183
184 @-webkit-keyframes heartbeat { 184 @-webkit-keyframes heartbeat {
185 from { 185 from {
186 -webkit-transform: scale(1); 186 -webkit-transform: scale(1);
187 transform: scale(1); 187 transform: scale(1);
188 -webkit-transform-origin: center center; 188 -webkit-transform-origin: center center;
189 transform-origin: center center; 189 transform-origin: center center;
190 -webkit-animation-timing-function: ease-out; 190 -webkit-animation-timing-function: ease-out;
191 animation-timing-function: ease-out; 191 animation-timing-function: ease-out;
192 } 192 }
193 10% { 193 10% {
194 -webkit-transform: scale(0.91); 194 -webkit-transform: scale(0.91);
195 transform: scale(0.91); 195 transform: scale(0.91);
196 -webkit-animation-timing-function: ease-in; 196 -webkit-animation-timing-function: ease-in;
197 animation-timing-function: ease-in; 197 animation-timing-function: ease-in;
198 } 198 }
199 17% { 199 17% {
200 -webkit-transform: scale(0.98); 200 -webkit-transform: scale(0.98);
201 transform: scale(0.98); 201 transform: scale(0.98);
202 -webkit-animation-timing-function: ease-out; 202 -webkit-animation-timing-function: ease-out;
203 animation-timing-function: ease-out; 203 animation-timing-function: ease-out;
204 } 204 }
205 33% { 205 33% {
206 -webkit-transform: scale(0.87); 206 -webkit-transform: scale(0.87);
207 transform: scale(0.87); 207 transform: scale(0.87);
208 -webkit-animation-timing-function: ease-in; 208 -webkit-animation-timing-function: ease-in;
209 animation-timing-function: ease-in; 209 animation-timing-function: ease-in;
210 } 210 }
211 45% { 211 45% {
212 -webkit-transform: scale(1); 212 -webkit-transform: scale(1);
213 transform: scale(1); 213 transform: scale(1);
214 -webkit-animation-timing-function: ease-out; 214 -webkit-animation-timing-function: ease-out;
215 animation-timing-function: ease-out; 215 animation-timing-function: ease-out;
216 } 216 }
217 } 217 }
218 218
219 @keyframes heartbeat { 219 @keyframes heartbeat {
220 from { 220 from {
221 -webkit-transform: scale(1); 221 -webkit-transform: scale(1);
222 transform: scale(1); 222 transform: scale(1);
223 -webkit-transform-origin: center center; 223 -webkit-transform-origin: center center;
224 transform-origin: center center; 224 transform-origin: center center;
225 -webkit-animation-timing-function: ease-out; 225 -webkit-animation-timing-function: ease-out;
226 animation-timing-function: ease-out; 226 animation-timing-function: ease-out;
227 } 227 }
228 10% { 228 10% {
229 -webkit-transform: scale(0.91); 229 -webkit-transform: scale(0.91);
230 transform: scale(0.91); 230 transform: scale(0.91);
231 -webkit-animation-timing-function: ease-in; 231 -webkit-animation-timing-function: ease-in;
232 animation-timing-function: ease-in; 232 animation-timing-function: ease-in;
233 } 233 }
234 17% { 234 17% {
235 -webkit-transform: scale(0.98); 235 -webkit-transform: scale(0.98);
236 transform: scale(0.98); 236 transform: scale(0.98);
237 -webkit-animation-timing-function: ease-out; 237 -webkit-animation-timing-function: ease-out;
238 animation-timing-function: ease-out; 238 animation-timing-function: ease-out;
239 } 239 }
240 33% { 240 33% {
241 -webkit-transform: scale(0.87); 241 -webkit-transform: scale(0.87);
242 transform: scale(0.87); 242 transform: scale(0.87);
243 -webkit-animation-timing-function: ease-in; 243 -webkit-animation-timing-function: ease-in;
244 animation-timing-function: ease-in; 244 animation-timing-function: ease-in;
245 } 245 }
246 45% { 246 45% {
247 -webkit-transform: scale(1); 247 -webkit-transform: scale(1);
248 transform: scale(1); 248 transform: scale(1);
249 -webkit-animation-timing-function: ease-out; 249 -webkit-animation-timing-function: ease-out;
250 animation-timing-function: ease-out; 250 animation-timing-function: ease-out;
251 } 251 }
252 } 252 }
253
254 .wobble-hor-bottom {
255 -webkit-animation: wobble-hor-bottom 0.8s both;
256 animation: wobble-hor-bottom 0.8s both;
257 }
258
259 @-webkit-keyframes wobble-hor-bottom {
260 0%,
261 100% {
262 -webkit-transform: translateX(0%);
263 transform: translateX(0%);
264 -webkit-transform-origin: 50% 50%;
265 transform-origin: 50% 50%;
266 }
267 15% {
268 -webkit-transform: translateX(-30px) rotate(-6deg);
269 transform: translateX(-30px) rotate(-6deg);
270 }
271 30% {
272 -webkit-transform: translateX(15px) rotate(6deg);
273 transform: translateX(15px) rotate(6deg);
274 }
275 45% {
276 -webkit-transform: translateX(-15px) rotate(-3.6deg);
277 transform: translateX(-15px) rotate(-3.6deg);
278 }
279 60% {
280 -webkit-transform: translateX(9px) rotate(2.4deg);
281 transform: translateX(9px) rotate(2.4deg);
282 }
283 75% {
284 -webkit-transform: translateX(-6px) rotate(-1.2deg);
285 transform: translateX(-6px) rotate(-1.2deg);
286 }
287 }
288
289 @keyframes wobble-hor-bottom {
290 0%,
291 100% {
292 -webkit-transform: translateX(0%);
293 transform: translateX(0%);
294 -webkit-transform-origin: 50% 50%;
295 transform-origin: 50% 50%;
296 }
297 15% {
298 -webkit-transform: translateX(-30px) rotate(-6deg);
299 transform: translateX(-30px) rotate(-6deg);
300 }
301 30% {
302 -webkit-transform: translateX(15px) rotate(6deg);
303 transform: translateX(15px) rotate(6deg);
304 }
305 45% {
306 -webkit-transform: translateX(-15px) rotate(-3.6deg);
307 transform: translateX(-15px) rotate(-3.6deg);
308 }
309 60% {
310 -webkit-transform: translateX(9px) rotate(2.4deg);
311 transform: translateX(9px) rotate(2.4deg);
312 }
313 75% {
314 -webkit-transform: translateX(-6px) rotate(-1.2deg);
315 transform: translateX(-6px) rotate(-1.2deg);
316 }
317 }
253 318