From 37f131a57b47f1d23625c265d850bdfc601a9a83 Mon Sep 17 00:00:00 2001 From: mpuebla Date: Thu, 15 Aug 2019 09:41:35 -0300 Subject: [PATCH] Cambio de nombre de animacion. --- src/assets/scss/animation.scss | 56 ++++++++++++++++++++++++++++++++++++------ 1 file changed, 48 insertions(+), 8 deletions(-) diff --git a/src/assets/scss/animation.scss b/src/assets/scss/animation.scss index 7cadcfa..7e18cd3 100644 --- a/src/assets/scss/animation.scss +++ b/src/assets/scss/animation.scss @@ -37,17 +37,17 @@ } } -.fade-left { +.fade-right { margin-top: 25px; font-size: 21px; text-align: center; - animation: fadeleft 1s; - -moz-animation: fadeleft 1s; /* Firefox */ - -webkit-animation: fadeleft 1s; /* Safari and Chrome */ - -o-animation: fadeleft 1s; /* Opera */ + animation: faderight 1s; + -moz-animation: faderight 1s; /* Firefox */ + -webkit-animation: faderight 1s; /* Safari and Chrome */ + -o-animation: faderight 1s; /* Opera */ } -@keyframes fadeleft { +@keyframes faderight { from { opacity: 0; transform: translateX(-20px); @@ -58,7 +58,7 @@ } } -@-moz-keyframes fadeleft { +@-moz-keyframes faderight { /* Firefox */ from { opacity: 0; @@ -70,7 +70,7 @@ } } -@-webkit-keyframes fadeleft { +@-webkit-keyframes faderight { /* Safari and Chrome */ from { opacity: 0; @@ -81,3 +81,43 @@ -webkit-transform: translateX(0); } } + +.fade-left { + + -webkit-animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; + animation: fadeleft .5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; +} + +@-webkit-keyframes fadeleft { + 0% { + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; + opacity: 1; + } + 100% { + -webkit-transform: scaleX(1); + transform: scaleX(1); + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; + opacity: 1; + } +} + +@keyframes fadeleft { + 0% { + -webkit-transform: scaleX(0); + transform: scaleX(0); + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; + opacity: 1; + } + 100% { + -webkit-transform: scaleX(1); + transform: scaleX(1); + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; + opacity: 1; + } +} -- 1.9.1