/*************************************** **************************************** 8888888b. d8888Y88b d88P 888 Y88b d88888 Y88b d88P 888 888 d88P888 Y88o88P 888 d88P d88P 888 Y888P 8888888P" d88P 888 d888b 888 d88P 888 d88888b 888 d8888888888 d88P Y88b 888 d88P 888d88P Y88b CSS Animate V 1.0 Copyright 2017 PAXagency Created by Albert Kiteck www.paxagency.com **************************************** ****************************************/ /*EFFECTS*/ .pax.fade,.pax.fade-in { -webkit-animation:fadeIn;-moz-animation:fadeIn;animation:fadeIn;} .pax.fade-out { -webkit-animation:fadeOut;-moz-animation:fadeOut;animation:fadeOut;} .pax.slide-top {-webkit-animation:slideTop;-moz-animation:slideTop;animation:slideTop;} .pax.slide-left {-webkit-animation:slideLeft;-moz-animation:slideLeft;animation:slideLeft;} .pax.slide-right {-webkit-animation:slideRight;-moz-animation:slideRight;animation:slideRight;} .pax.slide-bottom {-webkit-animation:slideBottom;-moz-animation:slideBottom;animation:slideBottom;} .pax.slide-top-out {-webkit-animation:slideTopOut; -moz-animation:slideTopOut;animation:slideTopOut;} .pax.slide-left-out {-webkit-animation:slideLeftOut;-moz-animation:slideLeftOut;animation:slideLeftOut;} .pax.slide-right-out {-webkit-animation:slideRightOut;-moz-animation:slideRightOut;animation:slideRightOut;} .pax.slide-bottom-out {-webkit-animation:slideBottomOut;-moz-animation:slideBottomOut;animation:slideBottomOut;} .pax.scale { -webkit-animation:scale;-moz-animation:scale;animation:scale;} .pax.scale-out { -webkit-animation:scaleOut;-moz-animation:scaleOut;animation:scaleOut;} .pax.scale-big { -webkit-animation:scaleBig;-moz-animation:scaleBig;animation:scaleBig;} .pax.scale-big-out { -webkit-animation:scaleBigOut;-moz-animation:scaleBigOut;animation:scaleBigOut;} .pax.bounce {-webkit-animation: bounce .5s forwards;animation: bounce .5s forwards} .pax.pulse {-webkit-animation: pulse 1s ease-out;-webkit-animation-iteration-count: infinite;opacity: 0.5;} .pax.shake {-webkit-animation: shake .5s forwards;animation: shake .5s forwards} /*DEFAULTS*/ .pax.slide-top,.pax.scale-big,.pax.scale-big-out,.pax.scale-out,.pax.scale,.pax.fade-in,.pax.slide,.pax.slide-left,.pax.slide-right,.pax.slide-bottom,.pax.fade,.pax.fade-out,.pax.slide-top-out,.pax.slide-bottom-out,.pax.slide-left-out,.pax.slide-right-out { position:relative; opacity:0; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; } .pax.scale-big-out,.pax.scale-out,.pax.fade-out,.pax.slide-top-out,.pax.slide-left-out,.pax.slide-right-out,.pax.slide-bottom-out{opacity:1;} .pax.fade-in,.pax.fade-out,.pax.fade,.pax.scale-top-out,.pax.scale-right-out,.pax.scale-left-out,.pax.scale-bottom-out {animation-timing-function:ease-in;} /*TIMING*/ .pax.length-10 {-webkit-animation-duration:.25s;-moz-animation-duration:.25s;animation-duration:.25s;} .pax.length-25 {-webkit-animation-duration:.25s;-moz-animation-duration:.25s;animation-duration:.25s;} .pax.length-50 {-webkit-animation-duration:.5s;-moz-animation-duration:.5s;animation-duration:.5s;} .pax.length-2 {-webkit-animation-duration:2s;-moz-animation-duration:2s;animation-duration:2s;} .pax.length-250 {-webkit-animation-duration:2.5s;-moz-animation-duration:2.5s;animation-duration:2.5s;} .pax.length-3 {-webkit-animation-duration:3s;-moz-animation-duration:3s;animation-duration:3s;} .pax.length-4 {-webkit-animation-duration:4s;-moz-animation-duration:4s;animation-duration:4s;} .pax.length-5 {-webkit-animation-duration:5s;-moz-animation-duration:5s;animation-duration:5s;} /*DELAY*/ .pax.delay-10 {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;} .pax.delay-25 {-webkit-animation-delay:.25s;-moz-animation-delay:.25s;animation-delay:.25s;} .pax.delay-50 {-webkit-animation-delay:.50s;-moz-animation-delay:.50s;animation-delay:.50s;} .pax.delay-75 {-webkit-animation-delay:.75s;-moz-animation-delay:.75s;animation-delay:.75s;} .pax.delay-1 {-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;} .pax.delay-2 {-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;} .pax.delay-1 {-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s;} /*EASING*/ .pax.ease-linear {animation-timing-function:linear;} .pax.ease {animation-timing-function:ease;} .pax.ease-in {animation-timing-function:ease-in;} .pax.ease-in-out {animation-timing-function:ease-in-out;} .pax.ease-cubic {animation-timing-function:cubic-bezier(0.75, 0, 0.25, 1);} .pax.ease-elastic {animation-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55);} /*ANIMATIONS*/ @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1;}} @-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } } @-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } } @keyframes fadeOut { from { opacity:1; } to { opacity:0;}} @keyframes slideTop {from{-webkit-transform: translateY(-100%);transform: translateY(-100%);opacity:0;} to{-webkit-transform: translateY(0%);transform: translateY(0%);opacity:1;}} @-webkit-keyframes slideTop {from{-webkit-transform: translateY(-100%);transform: translateY(-100%);opacity:0;} to{-webkit-transform: translateY(0%);transform: translateY(0%);opacity:1;}} @-moz-keyframes slideTop {from{-webkit-transform: translateY(-100%);transform: translateY(-100%);opacity:0;} to{-webkit-transform: translateY(0%);transform: translateY(0%);opacity:1;}} @keyframes slideLeft {from{ -webkit-transform: translateX(-100%);transform: translateX(-100%);opacity:0;} to{translateX(0%);transform: translateX(0%);opacity:1;}} @-webkit-keyframes slideLeft {from{ -webkit-transform: translateX(-100%);transform: translateX(-100%);opacity:0;} to{translateX(0%);transform: translateX(0%);opacity:1;}} @-moz-keyframes slideLeft{from{ -webkit-transform: translateX(-100%);transform: translateX(-100%);opacity:0;} to{translateX(0%);transform: translateX(0%);opacity:1;}} @keyframes slideRight {from{-webkit-transform: translateX(100%);transform: translateX(100%);opacity:0;} to{translateX(0%);transform: translateX(0%);;opacity:1;}} @-webkit-keyframes slideRight {from{-webkit-transform: translateX(100%);transform: translateX(100%);opacity:0;} to{translateX(0%);transform: translateX(0%);;opacity:1;}} @-moz-keyframes slideRight {from{-webkit-transform: translateX(100%);transform: translateX(100%);opacity:0;} to{translateX(0%);transform: translateX(0%);;opacity:1;}} @keyframes slideBottom {from{-webkit-transform: translateY(100%);transform: translateY(100%);opacity:0;} to{-webkit-transform: translateY(0%);transform: translateY(0%);opacity:1;}} @-webkit-keyframes slideBottom {from{-webkit-transform: translateY(100%);transform: translateY(100%);opacity:0;} to{-webkit-transform: translateY(0%);transform: translateY(0%);opacity:1;}} @-moz-keyframes slideBottom {from{-webkit-transform: translateY(100%);transform: translateY(100%);opacity:0;} to{-webkit-transform: translateY(0%);transform: translateY(0%);opacity:1;}} @keyframes slideTopOut {from{-webkit-transform: translateY(0%);transform: translateY(0%);opacity:1;} to{-webkit-transform: translateY(-100%);transform: translateY(-100%);opacity:0;}} @-webkit-keyframes slideTopOut {from{-webkit-transform: translateY(0%);transform: translateY(0%);opacity:1;} to{-webkit-transform: translateY(-100%);transform: translateY(-100%);opacity:0;}} @-moz-keyframes slideTopOut {from{-webkit-transform: translateY(0%);transform: translateY(0%);opacity:1;} to{-webkit-transform: translateY(-100%);transform: translateY(-100%);opacity:0;}} @keyframes slideLeftOut {from{ -webkit-transform: translateX(0%);transform: translateX(0%);opacity:1;} to{translateX(-100%);transform: translateX(-100%);opacity:0;}} @-webkit-keyframes slideLeftOut {from{ -webkit-transform: translateX(0%);transform: translateX(0%);opacity:1;} to{translateX(-100%);transform: translateX(-100%);opacity:0;}} @-moz-keyframes slideLeftOut {from{ -webkit-transform: translateX(0%);transform: translateX(0%);opacity:1;} to{translateX(-100%);transform: translateX(-100%);opacity:0;}} @keyframes slideRightOut {from{ -webkit-transform: translateX(0%);transform: translateX(0%);opacity:1;} to{translateX(100%);transform: translateX(100%);opacity:0;}} @-webkit-keyframes slideRightOut {from{ -webkit-transform: translateX(0%);transform: translateX(0%);opacity:1;} to{translateX(100%);transform: translateX(100%);opacity:0;}} @-moz-keyframes slideRightOut {from{ -webkit-transform: translateX(0%);transform: translateX(0%);opacity:1;} to{translateX(100%);transform: translateX(100%);opacity:0;}} @keyframes slideBottomOut {from{-webkit-transform: translateY(0%);transform: translateY(0%);opacity:1;} to{-webkit-transform: translateY(100%);transform: translateY(100%);opacity:0;}} @-webkit-keyframes slideBottomOut {from{-webkit-transform: translateY(0%);transform: translateY(0%);opacity:1;} to{-webkit-transform: translateY(100%);transform: translateY(100%);opacity:0;}} @-moz-keyframes slideBottomOut {from{-webkit-transform: translateY(0%);transform: translateY(0%);opacity:1;} to{-webkit-transform: translateY(100%);transform: translateY(100%);opacity:0;}} @keyframes scale {from{-webkit-transform:scale(1.5);transform: scale(1.5);opacity:0;} to{-webkit-transform:scale(1);transform: scale(1);opacity:1;}} @-webkit-keyframes scale {from{-webkit-transform:scale(1.5);transform: scale(1.5);opacity:0;} to{-webkit-transform:scale(1);transform: scale(1);opacity:1;}} @-moz-keyframes scale {from{-webkit-transform:scale(1.5);transform: scale(1.5);opacity:0;} to{-webkit-transform:scale(1);transform: scale(1);opacity:1;}} @keyframes scaleOut {from{-webkit-transform:scale(1);transform: scale(1);opacity:1;} to{-webkit-transform:scale(1.5);transform: scale(1.5);opacity:0;}} @-webkit-keyframes scaleOut {from{-webkit-transform:scale(1);transform: scale(1);opacity:1;} to{-webkit-transform:scale(1.5);transform: scale(1.5);opacity:0;}} @-moz-keyframes scaleOut {from{-webkit-transform:scale(1);transform: scale(1);opacity:1;} to{-webkit-transform:scale(1.5);transform: scale(1.5);opacity:0;}} @keyframes scaleBig {from{-webkit-transform:scale(3);transform: scale(3);opacity:0;} to{-webkit-transform:scale(1);transform: scale(1);opacity:1;}} @-webkit-keyframes scaleBog {from{-webkit-transform:scale(3);transform: scale(3);opacity:0;} to{-webkit-transform:scale(1);transform: scale(1);opacity:1;}} @-moz-keyframes scaleBig {from{-webkit-transform:scale(3);transform: scale(3);opacity:0;} to{-webkit-transform:scale(1);transform: scale(1);opacity:1;}} @keyframes scaleBigOut {from{-webkit-transform:scale(1);transform: scale(1);opacity:1;} to{-webkit-transform:scale(3);transform: scale(3);opacity:0;}} @-webkit-keyframes scaleBigOut {from{-webkit-transform:scale(1);transform: scale(1);opacity:1;} to{-webkit-transform:scale(3);transform: scale(3);opacity:0;}} @-moz-keyframes scaleBigOut {from{-webkit-transform:scale(1);transform: scale(1);opacity:1;} to{-webkit-transform:scale(3);transform: scale(3);opacity:0;}} @keyframes pulse {0% {opacity: 0.5;} 50% {opacity: 1.0;} 100% {opacity: 0.5;}} @-webkit-keyframes pulse {0% {opacity: 0.5;} 50% {opacity: 1.0;} 100% {opacity: 0.5;}} @-moz-keyframes pulse {0% {opacity: 0.5;} 50% {opacity: 1.0;} 100% {opacity: 0.5;}} @keyframes "bounce" { 0% {-webkit-transform: translateY(0);transform: translateY(0);} 20% {-webkit-transform: translateY(10px);transform: translateY(10px);} 70% {-webkit-transform: translateY(0px);transform: translateY(0px);} to {-webkit-transform: translateY(0);transform: translateY(0);} } @-webkit-keyframes "bounce" { 0% {-webkit-transform: translateY(0);transform: translateY(0);} 20% {-webkit-transform: translateY(10px);transform: translateY(10px);} 70% {-webkit-transform: translateY(0px);transform: translateY(0px);} to {-webkit-transform: translateY(0);transform: translateY(0);} } @-moz-keyframes "bounce" { 0% {-webkit-transform: translateY(0);transform: translateY(0);} 20% {-webkit-transform: translateY(10px);transform: translateY(10px);} 70% {-webkit-transform: translateY(0px);transform: translateY(0px);} to {-webkit-transform: translateY(0);transform: translateY(0);} } @keyframes "shake" { 0% {-webkit-transform: translateX(0);transform: translateX(0);} 12.5% {-webkit-transform: translateX(-6px);transform: translateX(-6px);} 37.5% {-webkit-transform: translateX(5px);transform: translateX(5px);} 62.5% {-webkit-transform: translateX(-3px);transform: translateX(-3px);} 87.5% {-webkit-transform: translateX(2px);transform: translateX(2px);} 100% {-webkit-transform: translateX(0);transform: translateX(0);} } @-webkit-keyframes "shake" { 0% {-webkit-transform: translateX(0);transform: translateX(0);} 12.5% {-webkit-transform: translateX(-6px);transform: translateX(-6px);} 37.5% {-webkit-transform: translateX(5px);transform: translateX(5px);} 62.5% {-webkit-transform: translateX(-3px);transform: translateX(-3px);} 87.5% {-webkit-transform: translateX(2px);transform: translateX(2px);} 100% {-webkit-transform: translateX(0);transform: translateX(0);} } @-moz-keyframes "shake" { 0% {-webkit-transform: translateX(0);transform: translateX(0);} 12.5% {-webkit-transform: translateX(-6px);transform: translateX(-6px);} 37.5% {-webkit-transform: translateX(5px);transform: translateX(5px);} 62.5% {-webkit-transform: translateX(-3px);transform: translateX(-3px);} 87.5% {-webkit-transform: translateX(2px);transform: translateX(2px);} 100% {-webkit-transform: translateX(0);transform: translateX(0);} }