Commit 264e5848c819824ec83307f56becfcb9cb49265f
1 parent
ac145dc6a6
Exists in
master
and in
1 other branch
agregada animacion
Showing
1 changed file
with
65 additions
and
0 deletions
Show diff stats
src/assets/scss/animation.scss
| ... | ... | @@ -250,3 +250,68 @@ |
| 250 | 250 | animation-timing-function: ease-out; |
| 251 | 251 | } |
| 252 | 252 | } |
| 253 | + | |
| 254 | +.wobble-hor-bottom { | |
| 255 | + -webkit-animation: wobble-hor-bottom 0.8s both; | |
| 256 | + animation: wobble-hor-bottom 0.8s both; | |
| 257 | +} | |
| 258 | + | |
| 259 | +@-webkit-keyframes wobble-hor-bottom { | |
| 260 | + 0%, | |
| 261 | + 100% { | |
| 262 | + -webkit-transform: translateX(0%); | |
| 263 | + transform: translateX(0%); | |
| 264 | + -webkit-transform-origin: 50% 50%; | |
| 265 | + transform-origin: 50% 50%; | |
| 266 | + } | |
| 267 | + 15% { | |
| 268 | + -webkit-transform: translateX(-30px) rotate(-6deg); | |
| 269 | + transform: translateX(-30px) rotate(-6deg); | |
| 270 | + } | |
| 271 | + 30% { | |
| 272 | + -webkit-transform: translateX(15px) rotate(6deg); | |
| 273 | + transform: translateX(15px) rotate(6deg); | |
| 274 | + } | |
| 275 | + 45% { | |
| 276 | + -webkit-transform: translateX(-15px) rotate(-3.6deg); | |
| 277 | + transform: translateX(-15px) rotate(-3.6deg); | |
| 278 | + } | |
| 279 | + 60% { | |
| 280 | + -webkit-transform: translateX(9px) rotate(2.4deg); | |
| 281 | + transform: translateX(9px) rotate(2.4deg); | |
| 282 | + } | |
| 283 | + 75% { | |
| 284 | + -webkit-transform: translateX(-6px) rotate(-1.2deg); | |
| 285 | + transform: translateX(-6px) rotate(-1.2deg); | |
| 286 | + } | |
| 287 | +} | |
| 288 | + | |
| 289 | +@keyframes wobble-hor-bottom { | |
| 290 | + 0%, | |
| 291 | + 100% { | |
| 292 | + -webkit-transform: translateX(0%); | |
| 293 | + transform: translateX(0%); | |
| 294 | + -webkit-transform-origin: 50% 50%; | |
| 295 | + transform-origin: 50% 50%; | |
| 296 | + } | |
| 297 | + 15% { | |
| 298 | + -webkit-transform: translateX(-30px) rotate(-6deg); | |
| 299 | + transform: translateX(-30px) rotate(-6deg); | |
| 300 | + } | |
| 301 | + 30% { | |
| 302 | + -webkit-transform: translateX(15px) rotate(6deg); | |
| 303 | + transform: translateX(15px) rotate(6deg); | |
| 304 | + } | |
| 305 | + 45% { | |
| 306 | + -webkit-transform: translateX(-15px) rotate(-3.6deg); | |
| 307 | + transform: translateX(-15px) rotate(-3.6deg); | |
| 308 | + } | |
| 309 | + 60% { | |
| 310 | + -webkit-transform: translateX(9px) rotate(2.4deg); | |
| 311 | + transform: translateX(9px) rotate(2.4deg); | |
| 312 | + } | |
| 313 | + 75% { | |
| 314 | + -webkit-transform: translateX(-6px) rotate(-1.2deg); | |
| 315 | + transform: translateX(-6px) rotate(-1.2deg); | |
| 316 | + } | |
| 317 | +} |