@keyframes daftar {

    0%,
    100% {
        transform: rotate(-1deg);
        -webkit-transform: rotate(-1deg);
        -moz-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
        -o-transform: rotate(-1deg);
    }

    50% {
        transform: rotate(1deg);
        -webkit-transform: rotate(1deg);
        -moz-transform: rotate(1deg);
        -ms-transform: rotate(1deg);
        -o-transform: rotate(1deg);
    }
}


@keyframes perahu {
    0% {
        transform: translateX(0) rotateZ(0deg);
        -webkit-transform: translateX(0) rotateZ(0deg);
        -moz-transform: translateX(0) rotateZ(0deg);
        -ms-transform: translateX(0) rotateZ(0deg);
        -o-transform: translateX(0) rotateZ(0deg);
        z-index: 2;
    }

    10% {
        transform: translateX(10vw) rotateZ(0deg);
        -webkit-transform: translateX(10vw) rotateZ(0deg);
        -moz-transform: translateX(10vw) rotateZ(0deg);
        -ms-transform: translateX(10vw) rotateZ(0deg);
        -o-transform: translateX(10vw) rotateZ(0deg);
        z-index: 2;
    }


    15% {
        transform: translateX(12vw) rotateZ(-10deg);
        -webkit-transform: translateX(12vw) rotateZ(-10deg);
        -moz-transform: translateX(12vw) rotateZ(-10deg);
        -ms-transform: translateX(12vw) rotateZ(-10deg);
        -o-transform: translateX(12vw) rotateZ(-10deg);
        z-index: 2;
    }

    16% {
        transform: translateX(14vw) rotateZ(-20deg);
        -webkit-transform: translateX(14vw) rotateZ(-20deg);
        -moz-transform: translateX(14vw) rotateZ(-20deg);
        -ms-transform: translateX(14vw) rotateZ(-20deg);
        -o-transform: translateX(14vw) rotateZ(-20deg);
        z-index: 2;
    }

    17% {
        transform: translateX(15vw) rotateZ(-30deg);
        -webkit-transform: translateX(15vw) rotateZ(-30deg);
        -moz-transform: translateX(15vw) rotateZ(-30deg);
        -ms-transform: translateX(15vw) rotateZ(-30deg);
        -o-transform: translateX(15vw) rotateZ(-30deg);
        z-index: 2;
    }

    18% {
        transform: translateX(17vw) rotateZ(-20deg);
        -webkit-transform: translateX(17vw) rotateZ(-20deg);
        -moz-transform: translateX(17vw) rotateZ(-20deg);
        -ms-transform: translateX(17vw) rotateZ(-20deg);
        -o-transform: translateX(17vw) rotateZ(-20deg);
        z-index: 2;
    }

    19% {
        transform: translateX(19vw) rotateZ(-10deg);
        -webkit-transform: translateX(19vw) rotateZ(-10deg);
        -moz-transform: translateX(19vw) rotateZ(-10deg);
        -ms-transform: translateX(19vw) rotateZ(-10deg);
        -o-transform: translateX(19vw) rotateZ(-10deg);
        z-index: 2;
    }

    20% {
        transform: translateX(20vw) rotateZ(0deg);
        -webkit-transform: translateX(20vw) rotateZ(0deg);
        -moz-transform: translateX(20vw) rotateZ(0deg);
        -ms-transform: translateX(20vw) rotateZ(0deg);
        -o-transform: translateX(20vw) rotateZ(0deg);
        z-index: 2;
    }

    30% {
        transform: translateX(30vw) rotateZ(0deg);
        -webkit-transform: translateX(30vw) rotateZ(0deg);
        -moz-transform: translateX(30vw) rotateZ(0deg);
        -ms-transform: translateX(30vw) rotateZ(0deg);
        -o-transform: translateX(30vw) rotateZ(0deg);
        z-index: 1;
    }

    40% {
        transform: translateX(40vw) rotateZ(0deg);
        -webkit-transform: translateX(40vw) rotateZ(0deg);
        -moz-transform: translateX(40vw) rotateZ(0deg);
        -ms-transform: translateX(40vw) rotateZ(0deg);
        -o-transform: translateX(40vw) rotateZ(0deg);
        z-index: 1;
    }

    41% {
        transform: translateX(40vw) rotateZ(-5deg);
        -webkit-transform: translateX(40vw) rotateZ(-5deg);
        -moz-transform: translateX(40vw) rotateZ(-5deg);
        -ms-transform: translateX(40vw) rotateZ(-5deg);
        -o-transform: translateX(40vw) rotateZ(-5deg);
        z-index: 1;
    }

    42% {
        transform: translateX(40vw) rotateZ(10deg);
        -webkit-transform: translateX(40vw) rotateZ(10deg);
        -moz-transform: translateX(40vw) rotateZ(10deg);
        -ms-transform: translateX(40vw) rotateZ(10deg);
        -o-transform: translateX(40vw) rotateZ(10deg);
        z-index: 1;
    }

    43% {
        transform: translateX(40vw) rotateZ(-15deg);
        -webkit-transform: translateX(40vw) rotateZ(-15deg);
        -moz-transform: translateX(40vw) rotateZ(-15deg);
        -ms-transform: translateX(40vw) rotateZ(-15deg);
        -o-transform: translateX(40vw) rotateZ(-15deg);
        z-index: 1;
    }

    44% {
        transform: translateX(40vw) rotateZ(20deg);
        -webkit-transform: translateX(40vw) rotateZ(20deg);
        -moz-transform: translateX(40vw) rotateZ(20deg);
        -ms-transform: translateX(40vw) rotateZ(20deg);
        -o-transform: translateX(40vw) rotateZ(20deg);
        z-index: 1;
    }

    45% {
        transform: translateX(40vw) rotateZ(-25deg);
        -webkit-transform: translateX(40vw) rotateZ(-25deg);
        -moz-transform: translateX(40vw) rotateZ(-25deg);
        -ms-transform: translateX(40vw) rotateZ(-25deg);
        -o-transform: translateX(40vw) rotateZ(-25deg);
        z-index: 1;
    }

    50% {
        transform: translateX(80vw) rotateZ(0deg);
        -webkit-transform: translateX(80vw) rotateZ(0deg);
        -moz-transform: translateX(80vw) rotateZ(0deg);
        -ms-transform: translateX(80vw) rotateZ(0deg);
        -o-transform: translateX(80vw) rotateZ(0deg);
        z-index: 1;
    }

    55% {
        transform: translateX(80vw) rotateZ(10deg) scaleX(-1);
        -webkit-transform: translateX(80vw) rotateZ(10deg) scaleX(-1);
        -moz-transform: translateX(80vw) rotateZ(10deg) scaleX(-1);
        -ms-transform: translateX(80vw) rotateZ(10deg) scaleX(-1);
        -o-transform: translateX(80vw) rotateZ(10deg) scaleX(-1);
        z-index: 1;
    }

    60% {
        transform: translateX(70vw) rotateZ(8deg) scaleX(-1);
        -webkit-transform: translateX(70vw) rotateZ(8deg) scaleX(-1);
        -moz-transform: translateX(70vw) rotateZ(8deg) scaleX(-1);
        -ms-transform: translateX(70vw) rotateZ(8deg) scaleX(-1);
        -o-transform: translateX(70vw) rotateZ(8deg) scaleX(-1);
        z-index: 2;
    }

    70% {
        transform: translateX(50vw) rotateZ(-10deg)scaleX(-1);
        -webkit-transform: translateX(50vw) rotateZ(-10deg)scaleX(-1);
        -moz-transform: translateX(50vw) rotateZ(-10deg)scaleX(-1);
        -ms-transform: translateX(50vw) rotateZ(-10deg)scaleX(-1);
        -o-transform: translateX(50vw) rotateZ(-10deg)scaleX(-1);
        z-index: 2;
    }

    80% {
        transform: translateX(20vw) rotateZ(10deg)scaleX(-1);
        -webkit-transform: translateX(20vw) rotateZ(10deg)scaleX(-1);
        -moz-transform: translateX(20vw) rotateZ(10deg)scaleX(-1);
        -ms-transform: translateX(20vw) rotateZ(10deg)scaleX(-1);
        -o-transform: translateX(20vw) rotateZ(10deg)scaleX(-1);
        z-index: 2;
    }

    90% {
        transform: translateX(10vw) rotateZ(-30deg)scaleX(-1);
        -webkit-transform: translateX(10vw) rotateZ(-30deg)scaleX(-1);
        -moz-transform: translateX(10vw) rotateZ(-30deg)scaleX(-1);
        -ms-transform: translateX(10vw) rotateZ(-30deg)scaleX(-1);
        -o-transform: translateX(10vw) rotateZ(-30deg)scaleX(-1);
        z-index: 2;
    }

    95% {
        transform: translateX(5vw) rotateZ(10deg);
        -webkit-transform: translateX(5vw) rotateZ(10deg);
        -moz-transform: translateX(5vw) rotateZ(10deg);
        -ms-transform: translateX(5vw) rotateZ(10deg);
        -o-transform: translateX(5vw) rotateZ(10deg);
        z-index: 2;
    }

    100% {
        transform: translateX(0) rotateZ(0deg);
        -webkit-transform: translateX(0) rotateZ(0deg);
        -moz-transform: translateX(0) rotateZ(0deg);
        -ms-transform: translateX(0) rotateZ(0deg);
        -o-transform: translateX(0) rotateZ(0deg);
        z-index: 2;
    }
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
    }
}