/* ----------------------------------------------------------------- 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);}
}