Commit eaa6200612d6240bc406442ca371201643ab9563

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

Borradas propiedades en animacion fade-in

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