Agregada animacion para hacer fadeIn.

Marcelo Puebla
1 parent 3ddc5cace9
Showing 1 changed file with 19 additions and 1 deletions Show diff stats
src/sass/general.scss
@@ -355,8 +355,26 @@ button.clear-input {
     height: -webkit-fill-available;
     display: flex;
     position: absolute;
-    background-color: rgba(255,255,255,0.6);
+    background-color: rgba(255, 255, 255, 0.6);
     left: 0;
     top: 0;
     z-index: 9999;
 }
+.fadeIn {
+    opacity: 0;
+    animation: fadeIn 1.8s forwards;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    30% {
+        opacity: 0.6;
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
...	...	@@ -355,8 +355,26 @@ button.clear-input {
355	355	height: -webkit-fill-available;
356	356	display: flex;
357	357	position: absolute;
358		- background-color: rgba(255,255,255,0.6);
	358	+ background-color: rgba(255, 255, 255, 0.6);
359	359	left: 0;
360	360	top: 0;
361	361	z-index: 9999;
362	362	}
	363	+.fadeIn {
	364	+ opacity: 0;
	365	+ animation: fadeIn 1.8s forwards;
	366	+}
	367	+
	368	+@keyframes fadeIn {
	369	+ 0% {
	370	+ opacity: 0;
	371	+ transform: translateY(10px);
	372	+ }
	373	+ 30% {
	374	+ opacity: 0.6;
	375	+ }
	376	+ 100% {
	377	+ opacity: 1;
	378	+ transform: translateY(0);
	379	+ }
	380	+}