.opal-move-up {
animation-name: opalMoveUp;
-moz-animation-name: opalMoveUp;
-webkit-animation-name: opalMoveUp;
}
@-webkit-keyframes opalMoveUp {
from {
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-moz-keyframes opalMoveUp {
from {
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@-ms-keyframes opalMoveUp {
from {
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes opalMoveUp {
from {
-webkit-transform: translateY(100px);
-ms-transform: translateY(100px);
transform: translateY(100px);
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}.opal-move-left {
animation-name: opalMoveLeft;
-moz-animation-name: opalMoveLeft;
-webkit-animation-name: opalMoveLeft;
}
@-webkit-keyframes opalMoveLeft {
from {
-webkit-transform: translateX(100px);
-ms-transform: translateX(100px);
transform: translateX(100px);
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@-moz-keyframes opalMoveLeft {
from {
-webkit-transform: translateX(100px);
-ms-transform: translateX(100px);
transform: translateX(100px);
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@-ms-keyframes opalMoveLeft {
from {
-webkit-transform: translateX(100px);
-ms-transform: translateX(100px);
transform: translateX(100px);
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes opalMoveLeft {
from {
-webkit-transform: translateX(100px);
-ms-transform: translateX(100px);
transform: translateX(100px);
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}.opal-move-right {
animation-name: opalMoveRight;
-moz-animation-name: opalMoveRight;
-webkit-animation-name: opalMoveRight;
}
@-webkit-keyframes opalMoveRight {
from {
-webkit-transform: translateX(-100px);
-ms-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@-moz-keyframes opalMoveRight {
from {
-webkit-transform: translateX(-100px);
-ms-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@-ms-keyframes opalMoveRight {
from {
-webkit-transform: translateX(-100px);
-ms-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes opalMoveRight {
from {
-webkit-transform: translateX(-100px);
-ms-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}.opal-scale-up {
animation-name: opalScaleUp;
-moz-animation-name: opalScaleUp;
-webkit-animation-name: opalScaleUp;
}
@-webkit-keyframes opalScaleUp {
from {
opacity: 0;
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
}
to {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes opalScaleUp {
from {
opacity: 0;
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
}
to {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-ms-keyframes opalScaleUp {
from {
opacity: 0;
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
}
to {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes opalScaleUp {
from {
opacity: 0;
-webkit-transform: scale(0.6);
-ms-transform: scale(0.6);
transform: scale(0.6);
}
to {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}