Commit 37f131a57b47f1d23625c265d850bdfc601a9a83
1 parent
39e477ba74
Exists in
master
and in
1 other branch
Cambio de nombre de animacion.
Showing
1 changed file
with
48 additions
and
8 deletions
Show diff stats
src/assets/scss/animation.scss
| ... | ... | @@ -37,17 +37,17 @@ |
| 37 | 37 | } |
| 38 | 38 | } |
| 39 | 39 | |
| 40 | -.fade-left { | |
| 40 | +.fade-right { | |
| 41 | 41 | margin-top: 25px; |
| 42 | 42 | font-size: 21px; |
| 43 | 43 | text-align: center; |
| 44 | - animation: fadeleft 1s; | |
| 45 | - -moz-animation: fadeleft 1s; /* Firefox */ | |
| 46 | - -webkit-animation: fadeleft 1s; /* Safari and Chrome */ | |
| 47 | - -o-animation: fadeleft 1s; /* Opera */ | |
| 44 | + animation: faderight 1s; | |
| 45 | + -moz-animation: faderight 1s; /* Firefox */ | |
| 46 | + -webkit-animation: faderight 1s; /* Safari and Chrome */ | |
| 47 | + -o-animation: faderight 1s; /* Opera */ | |
| 48 | 48 | } |
| 49 | 49 | |
| 50 | -@keyframes fadeleft { | |
| 50 | +@keyframes faderight { | |
| 51 | 51 | from { |
| 52 | 52 | opacity: 0; |
| 53 | 53 | transform: translateX(-20px); |
| ... | ... | @@ -58,7 +58,7 @@ |
| 58 | 58 | } |
| 59 | 59 | } |
| 60 | 60 | |
| 61 | -@-moz-keyframes fadeleft { | |
| 61 | +@-moz-keyframes faderight { | |
| 62 | 62 | /* Firefox */ |
| 63 | 63 | from { |
| 64 | 64 | opacity: 0; |
| ... | ... | @@ -70,7 +70,7 @@ |
| 70 | 70 | } |
| 71 | 71 | } |
| 72 | 72 | |
| 73 | -@-webkit-keyframes fadeleft { | |
| 73 | +@-webkit-keyframes faderight { | |
| 74 | 74 | /* Safari and Chrome */ |
| 75 | 75 | from { |
| 76 | 76 | opacity: 0; |
| ... | ... | @@ -81,3 +81,43 @@ |
| 81 | 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 | +} |