
@keyframes fadeIn {
    from {opacity:0}
    to {opacity:1}
}

@keyframes slideUp {
    from {transform: translateY(20vw)}
    to {transform: translateY(0vw)}
}

@keyframes slideLeft {
    from {transform: translateX(20vw)}
    to {transform: translateY(0vw)}
}

@keyframes slideRight {
    from {transform: translateX(-20vw)}
    to {transform: translateY(0vw)}
}

.uifx-container {
    position:fixed;
    left:0;
    top:0;
    z-index:-1;
    width:100%;
    height:100%;
    opacity:0;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,0.8) 20%, rgba(255,255,255, 0.9) 90%);
    overflow:hidden;
    animation: fadeIn 2s forwards;
}

.uifx-item {
    position:fixed;
    background-repeat:no-repeat;
    background-size: 100%;
    background-position:bottom center;
    right:0;
    width:100%;
    height:100%;
}

.uifx-awan {
    background-image: url('img/awan.png');
    background-size: 65vw;
    background-position: bottom 20vw left;
}

.uifx-yamato {
    background-image: url('img/yamato.png');
    background-size: 80vw;
    background-position: bottom right 5vw;
    animation: slideUp 2s forwards;
}

.uifx-burung {
    background-image: url('img/burung.png');
    background-size: 12vw;
    background-position: bottom 36vw right 5vw;
    opacity:0;
    animation: fadeIn 3s forwards, slideUp 2s forwards;
}

.uifx-bendera {
    background-image: url('img/bendera.png');
    background-size: 40vw;
    background-position: top -.5vw left;
    animation: slideRight 2s forwards;
}

.uifx-bung-tomo {
    background-image: url('img/bung-tomo.png');
    background-size: 26vw;
    background-position: bottom right;
    animation: slideLeft 2.5s forwards;
}

.uifx-asap {
    background-image: url('img/asap.png');
    background-size: 45vw;
    background-position: bottom -2vw right -3vw;
    opacity:0;
    animation: fadeIn 2s forwards 1s;
}

.uifx-prajurit {
    background-image: url('img/prajurit.png');
    background-size: 40vw;
    background-position: bottom right;
    animation: slideLeft 2s forwards;
}

.uifx-salam {
    background-image: url('img/salam.png');
    background-size: 30vw;
    background-position: center bottom 15vw;
    opacity:0;
    animation: fadeIn 2s forwards 1.5s;
}
