193 lines
2.9 KiB
CSS
193 lines
2.9 KiB
CSS
.animsition,
|
|
.animsition-overlay {
|
|
position: relative;
|
|
opacity: 0;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.animsition-overlay-slide {
|
|
position: fixed;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* loading option */
|
|
.roy-loader {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.roy-loader .icon_loader {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.roy-loader .icon_loader span {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
margin-right: 4px;
|
|
transform: translateZ(0);
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: linear;
|
|
animation-duration: 0.6s;
|
|
animation-name: icon_loader;
|
|
}
|
|
|
|
.roy-loader .icon_loader span:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.roy-loader .icon_loader span:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
@keyframes icon_loader {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
25% {
|
|
transform: translateY(3px);
|
|
}
|
|
75% {
|
|
transform: translateY(-3px);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.fade-in {
|
|
animation-name: fade-in;
|
|
}
|
|
@keyframes fade-out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fade-out {
|
|
animation-name: fade-out;
|
|
}
|
|
@keyframes fade-in-up {
|
|
0% {
|
|
transform: translateY(500px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.fade-in-up {
|
|
animation-name: fade-in-up;
|
|
}
|
|
@keyframes fade-out-up {
|
|
0% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(-500px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fade-out-up {
|
|
animation-name: fade-out-up;
|
|
}
|
|
@keyframes fade-in-up-sm {
|
|
0% {
|
|
transform: translateY(100px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.fade-in-up-sm {
|
|
animation-name: fade-in-up-sm;
|
|
}
|
|
@keyframes fade-out-up-sm {
|
|
0% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(-100px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fade-out-up-sm {
|
|
animation-name: fade-out-up-sm;
|
|
}
|
|
@keyframes fade-in-down {
|
|
0% {
|
|
transform: translateY(-500px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.fade-in-down {
|
|
animation-name: fade-in-down;
|
|
}
|
|
@keyframes fade-out-down {
|
|
0% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(500px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fade-out-down {
|
|
animation-name: fade-out-down;
|
|
}
|
|
@keyframes fade-in-down-sm {
|
|
0% {
|
|
transform: translateY(-100px);
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
.fade-in-down-sm {
|
|
animation-name: fade-in-down-sm;
|
|
}
|
|
@keyframes fade-out-down-sm {
|
|
0% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translateY(100px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.fade-out-down-sm {
|
|
animation-name: fade-out-down-sm;
|
|
}/*# sourceMappingURL=animsition.css.map */ |