.ikan {
    position: absolute;
    background: url('cosmetic/fish.svg');
    z-index: 0;
}

.ikan-1{
    opacity: .4;   
    top: 12%;
    left: 0;
    width: 100%;
    height: 18px; 
    background-size: 1000px 18px;
    animation: animateFish 4s linear infinite;
}
.ikan0{
    opacity: .7;   
    top: 6%;
    left: 0;
    width: 100%;
    height: 18px; 
    background-size: 1000px 18px;
    animation: animateFish 6s linear infinite;
}
.ikan1{
    opacity: .8;   
    top: 3%;
    left: 0;
    width: 100%;
    height: 30px; 
    background-size: 1000px 30px;
    animation: animateFish 7s linear infinite;
}
.ikan2{
    opacity: .6;   
    top: 15%;
    left: 0;
    width: 100%;
    height: 40px; 
    background-size: 1000px 40px;
    animation: animateFish 6s linear infinite;
}
.ikan3{
    opacity: .7;   
    top: 10%;
    left: 0;
    width: 100%;
    height: 25px; 
    background-size: 1000px 25px;
    animation: animateFish 5s linear infinite;
}

.ikan4{
    opacity: .8;   
    top: 8%;
    left: 0;
    width: 100%;
    height: 20px; 
    background-size: 1000px 20px;
    animation: animateFish 6.5s linear infinite;
}
.ikan5{
    opacity: .6;   
    top: 19%;
    left: 0;
    width: 100%;
    height: 25px; 
    background-size: 1000px 25px;
    animation: animateFish 5.5s linear infinite;
}
.ikan6{
    opacity: .6;   
    top: 50%;
    left: 0;
    width: 100%;
    height: 22px; 
    background-size: 1000px 22px;
    animation: animateFish 7s linear infinite;
}
.ikan9{
    opacity: .4;   
    top: 54%;
    left: 0;
    width: 100%;
    height: 18px; 
    background-size: 1000px 18px;
    animation: animateFish 9s linear infinite;
}
.ikan10{
    opacity: .3;   
    top: 56%;
    left: 0;
    width: 100%;
    height: 18px; 
    background-size: 1000px 18px;
    animation: animateFish 5s linear infinite;
}
.ikan7{
    opacity: .7;   
    top: 53%;
    left: 0;
    width: 100%;
    height: 27px; 
    background-size: 1000px 27px;
    animation: animateFish2 7s linear infinite;
}
.ikan8{
    opacity: .8;   
    top: 56%;
    left: 0;
    width: 100%;
    height: 30px; 
    background-size: 1000px 30px;
    animation: animateFish2 9s linear infinite;
}
.ikan11{
    opacity: .6;   
    top: 92%;
    left: 0;
    width: 100%;
    height: 23px; 
    background-size: 1000px 23px;
    animation: animateFish2 6s linear infinite;
}
.ikan12{
    opacity: .4;   
    top: 94%;
    left: 0;
    width: 100%;
    height: 18px; 
    background-size: 1000px 18px;
    animation: animateFish2 4s linear infinite;
}
.ikan13{
    opacity: .8;   
    top: 96%;
    left: 0;
    width: 100%;
    height: 28px; 
    background-size: 1000px 28px;
    animation: animateFish2 7.5s linear infinite;
}
.ikan14{
    opacity: .5;   
    top: 98%;
    left: 0;
    width: 100%;
    height: 21px; 
    background-size: 1000px 21px;
    animation: animateFish2 5s linear infinite;
}
@keyframes animateFish {
    0% {
        background-position-x: 0;
        transform: translateY(0px);   
    }
    16%{
        transform: translateY(-8px);
    }
    32%{
        transform: translateY(0px);
    }
    48%{
        transform: translateY(-13px);
    }
    64%{
        transform: translateY(0px);
    }
    80%{
        transform: translateY(-10px);
    }
    100% {
        background-position-x: 1000px;
        transform: translateY(0px);
    }
}
@keyframes animateFish2 {
    0% {
        background-position-x: 0;
        transform: translateY(0px) scaleX(-1)
    }
    16% {
        transform: translateY(-8px) scaleX(-1);
    }
    32% {
        transform: translateY(0px) scaleX(-1);
    }
    48% {
        transform: translateY(-13px) scaleX(-1);
    }
    64% {
        transform: translateY(0px) scaleX(-1);
    }
    80% {
        transform: translateY(-10px) scaleX(-1);
    }
    100% {
        background-position-x: 1000px; /* Move to the left */
        transform: translateY(0px) scaleX(-1);
    }
}