Martin Macola / autoservicio

Download as
Browse Code ยป

Commit 05c122ab8fc31e3b12e7c125dc07c461cdbcc5b5

Authored by Marcelo Puebla
1 parent 8c28c26d96
Exists in master

Cambio nombre de animacion.

Showing 1 changed file with 4 additions and 4 deletions   Show diff stats
src/assets/scss/animation.scss
Diff comments   View file @ 05c122a
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-top 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-top 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-top { 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-top { 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