/* ----------------------------------------------------------------- Transitions -- */ .fade-enter-active, .fade-leave-active { transition: opacity .25s; } .fade-enter, .fade-leave-to { opacity: 0; } .slidein-enter-active, .slidein-leave-active { transition: 1s; bottom: 10em; } .slidein-enter, .slidein-leave-to { bottom: 0em; } .fadeout-leave-active { transition: opacity .5s; } .fadeout-leave-to { opacity: 0; } .fadeout-enter-active { transition: opacity .0s; } .fadeout-enter { opacity: 1; } /* always present */ .expand-transition { transition: all .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden; } /* .expand-enter defines the starting state for entering */ /* .expand-leave defines the ending state for leaving */ .expand-enter, .expand-leave { height: 0; padding: 0 10px; opacity: 0; } .bounce-enter-active { animation: bounce-in .25s; } .bounce-leave-active { animation: bounce-in .25s reverse; } .egg-store-sale-notify button { animation: balloon 1.9s ease-in-out infinite; } @keyframes balloon { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1) } } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } .wiggle_l { animation: wiggle_left 1s infinite linear; -moz-animation: wiggle_left 1s infinite linear; /* Firefox */ -webkit-animation: wiggle_left 1s infinite linear; /* Safari and Chrome */ } .wiggle_r { animation: wiggle_right 1s infinite linear; -moz-animation: wiggle_right 1s infinite linear; /* Firefox */ -webkit-animation: wiggle_right 1s infinite linear; /* Safari and Chrome */ } @keyframes wiggle_left { 0% {margin-left: -5px;} 50% {margin-left: -10px;} 100% {margin-left: -5px;} } @-moz-keyframes wiggle_left { 0% {margin-left: -5px;} 50% {margin-left: -10px;} 100% {margin-left: -5px;} } @-webkit-keyframes wiggle_left { 0% {margin-left: -5px;} 50% {margin-left: -10px;} 100% {margin-left: -5px;} } @keyframes wiggle_right { 0% {margin-left: -7px;} 50% {margin-left: -2px;} 100% {margin-left: -7px;} } @-moz-keyframes wiggle_right { 0% {margin-left: -7px;} 50% {margin-left: -2px;} 100% {margin-left: -7px;} } @-webkit-keyframes wiggle_right { 0% {margin-left: -7px;} 50% {margin-left: -2px;} 100% {margin-left: -7px;} } .blink { animation: blinker 1s ease-out infinite; } @keyframes blinker { 50% { opacity: 0; } } /* ------------------------------------------------------------------------------------------ Pop Visible --*/ @-webkit-keyframes popVisible { 0% { transform: scale(0); } 2% { transform: scale(1.1); } 3% { transform: scale(1); } 40% { transform: scale(1); } 41% { transform: scale(1.1); } 43% { transform: scale(0); } 100% { transform: scale(0); } } @keyframes popVisible { 0% { transform: scale(0); } 2% { transform: scale(1.1); } 3% { transform: scale(1); } 40% { transform: scale(1); } 41% { transform: scale(1.1); } 43% { transform: scale(0); } 100% { transform: scale(0); } } /* ------------------------------------------------------------------------------------------ Spin --*/ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spinner { animation: spin 2.75s linear infinite; } .pure-wiggle { animation: wiggle 3000ms ease-in-out infinite alternate; -moz-animation: wiggle 3000ms ease-in-out infinite alternate; -webkit-animation: wiggle 3000ms ease-in-out infinite alternate; } .pure-wiggle:hover { animation-iteration-count: 1; -moz-animation-iteration-count: 1; -webkit-animation-iteration-count: 1; } @-webkit-keyframes wiggle { 0% {-webkit-transform: rotate(1deg);} 25% {-webkit-transform: rotate(-1deg);} 50% {-webkit-transform: rotate(1deg);} 75% {-webkit-transform: rotate(-1deg);} 100% {-webkit-transform: rotate(0deg);} } @-moz-keyframes wiggle { 0% {-webkit-transform: rotate(1deg);} 25% {-webkit-transform: rotate(-1deg);} 50% {-webkit-transform: rotate(1deg);} 75% {-webkit-transform: rotate(-1deg);} 100% {-webkit-transform: rotate(0deg);} } @keyframes wiggle { 0% {transform: rotate(1deg);} 25% {transform: rotate(-1deg);} 50% {transform: rotate(1deg);} 75% {transform: rotate(-1deg);} 100% {transform: rotate(0deg);} }