Commit eaa6200612d6240bc406442ca371201643ab9563
1 parent
70f4dec40e
Exists in
master
and in
1 other branch
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 |