Mauricio Cattafi / autoservicio

Download as
Browse Code ยป

Commit 37f131a57b47f1d23625c265d850bdfc601a9a83

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

Cambio de nombre de animacion.

Showing 1 changed file with 48 additions and 8 deletions   Show diff stats
src/assets/scss/animation.scss
Diff comments   View file @ 37f131a
1 .fade-in { 1 .fade-in {
2 margin-top: 25px; 2 margin-top: 25px;
3 font-size: 21px; 3 font-size: 21px;
4 text-align: center; 4 text-align: center;
5 animation: fadein 1s; 5 animation: fadein 1s;
6 -moz-animation: fadein 1s; /* Firefox */ 6 -moz-animation: fadein 1s; /* Firefox */
7 -webkit-animation: fadein 1s; /* Safari and Chrome */ 7 -webkit-animation: fadein 1s; /* Safari and Chrome */
8 -o-animation: fadein 1s; /* Opera */ 8 -o-animation: fadein 1s; /* Opera */
9 } 9 }
10 10
11 @keyframes fadein { 11 @keyframes fadein {
12 from { 12 from {
13 opacity: 0; 13 opacity: 0;
14 } 14 }
15 to { 15 to {
16 opacity: 1; 16 opacity: 1;
17 } 17 }
18 } 18 }
19 19
20 @-moz-keyframes fadein { 20 @-moz-keyframes fadein {
21 /* Firefox */ 21 /* Firefox */
22 from { 22 from {
23 opacity: 0; 23 opacity: 0;
24 } 24 }
25 to { 25 to {
26 opacity: 1; 26 opacity: 1;
27 } 27 }
28 } 28 }
29 29
30 @-webkit-keyframes fadein { 30 @-webkit-keyframes fadein {
31 /* Safari and Chrome */ 31 /* Safari and Chrome */
32 from { 32 from {
33 opacity: 0; 33 opacity: 0;
34 } 34 }
35 to { 35 to {
36 opacity: 1; 36 opacity: 1;
37 } 37 }
38 } 38 }
39 39
40 .fade-left { 40 .fade-right {
41 margin-top: 25px; 41 margin-top: 25px;
42 font-size: 21px; 42 font-size: 21px;
43 text-align: center; 43 text-align: center;
44 animation: fadeleft 1s; 44 animation: faderight 1s;
45 -moz-animation: fadeleft 1s; /* Firefox */ 45 -moz-animation: faderight 1s; /* Firefox */
46 -webkit-animation: fadeleft 1s; /* Safari and Chrome */ 46 -webkit-animation: faderight 1s; /* Safari and Chrome */
47 -o-animation: fadeleft 1s; /* Opera */ 47 -o-animation: faderight 1s; /* Opera */
48 } 48 }
49 49
50 @keyframes fadeleft { 50 @keyframes faderight {
51 from { 51 from {
52 opacity: 0; 52 opacity: 0;
53 transform: translateX(-20px); 53 transform: translateX(-20px);
54 } 54 }
55 to { 55 to {
56 opacity: 1; 56 opacity: 1;
57 transform: translateX(0); 57 transform: translateX(0);
58 } 58 }
59 } 59 }
60 60
61 @-moz-keyframes fadeleft { 61 @-moz-keyframes faderight {
62 /* Firefox */ 62 /* Firefox */
63 from { 63 from {
64 opacity: 0; 64 opacity: 0;
65 -moz-transform: translateX(-20px); 65 -moz-transform: translateX(-20px);
66 } 66 }
67 to { 67 to {
68 opacity: 1; 68 opacity: 1;
69 -moz-transform: translateX(0); 69 -moz-transform: translateX(0);
70 } 70 }
71 } 71 }
72 72
73 @-webkit-keyframes fadeleft { 73 @-webkit-keyframes faderight {
74 /* Safari and Chrome */ 74 /* Safari and Chrome */
75 from { 75 from {
76 opacity: 0; 76 opacity: 0;
77 -webkit-transform: translateX(-20px); 77 -webkit-transform: translateX(-20px);
78 } 78 }
79 to { 79 to {
80 opacity: 1; 80 opacity: 1;
81 -webkit-transform: translateX(0); 81 -webkit-transform: translateX(0);
82 } 82 }
83 } 83 }
84
85 .fade-left {
86
87 -webkit-animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
88 animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
89 }
90
91 @-webkit-keyframes fadeleft {
92 0% {
93 -webkit-transform: scaleX(0);
94 transform: scaleX(0);
95 -webkit-transform-origin: 100% 100%;
96 transform-origin: 100% 100%;
97 opacity: 1;
98 }
99 100% {
100 -webkit-transform: scaleX(1);
101 transform: scaleX(1);
102 -webkit-transform-origin: 100% 100%;
103 transform-origin: 100% 100%;
104 opacity: 1;
105 }
106 }
107
108 @keyframes fadeleft {
109 0% {
110 -webkit-transform: scaleX(0);
111 transform: scaleX(0);
112 -webkit-transform-origin: 100% 100%;
113 transform-origin: 100% 100%;
114 opacity: 1;
115 }
116 100% {
117 -webkit-transform: scaleX(1);
118 transform: scaleX(1);
119 -webkit-transform-origin: 100% 100%;
120 transform-origin: 100% 100%;
121 opacity: 1;
122 }
123 }
84 124