Files
newwalls.pl/themes/ayon__/_dev/css/components/animsition.css
2024-12-17 13:43:22 +01:00

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 */