.opal-am-popup {
animation: opalPopup;
-moz-animation-name: opalPopup;
-webkit-animation-name: opalPopup;
}
@-webkit-keyframes opalPopup {
from {
opacity: 0;
-webkit-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1300px;
perspective: 1300px;
}
70% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
opacity: 0.8;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
to {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes opalPopup {
from {
opacity: 0;
-webkit-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1300px;
perspective: 1300px;
}
70% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
opacity: 0.8;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
to {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
}
@-ms-keyframes opalPopup {
from {
opacity: 0;
-webkit-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1300px;
perspective: 1300px;
}
70% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
opacity: 0.8;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
to {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
}
@keyframes opalPopup {
from {
opacity: 0;
-webkit-transform: scale(0.4);
-ms-transform: scale(0.4);
transform: scale(0.4);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 1300px;
perspective: 1300px;
}
70% {
transform: scale(1.1);
-webkit-transform: scale(1.1);
opacity: 0.8;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
to {
transform: scale(1);
-webkit-transform: scale(1);
opacity: 1;
}
}