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 |