body {
    margin: 0;
    padding: 0;
    background-image: url('https://cdn.tgdd.vn/Files/2020/09/27/1293970/deep-ocean-background-vector_800x450.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;  
}


#background 
{
position: relative;
width: 100%;
height: 1300px;
}
#shark 
{
position: absolute;
left: 100px;
top: 200px;
width: 350px;
height: 800px; 
animation: shark 10s linear infinite running;
transform: scaleX(1);
}
@keyframes shark 
{
0% { left: 100px; top: 400px; }
20% { left: 300px; top: 400px; }
40% { left: 500px; top: 300px; }
50% { left: 600px; top: 50px; }
60% { left: 700px; top: 100px;  }
80% { left: 500px; top: 200px; }
100% { left: 100px; top: 400px;transform: rotateX(50); transform: scaleX(-1);}
}
#turtle
{
position: absolute;
left: 50px;
top: 50px;
width: 45px;
height: 800px; 
animation: turtle 30s linear infinite running;
transform: scaleX(1);
}
@keyframes turtle 
{
0% { left: 50px; top: 50px; }
25% { left: 100px; top: 100px; }
50% { left: 900px; top: 150px; }
75% { left: 500px; top: 50px;  }
100% { left: 900px; top: 100px; transform: scaleX(-1);}
}
#goldfish
{
position: absolute;
left: 50px;
top: 50px;
width: 45px;
height: 800px; 
animation: goldfish 20s linear infinite running;
transform: scaleX(1);
}
@keyframes goldfish
{
0% { left: 50px; top: 50px; }
10% { left: 100px; top: 100px; }
20% { left: 200px; top: 150px; }
30% { left: 300px; top: 200px; }
40% { left: 600px; top: 300px; }
50% { left: 800px; top: 200px; }
60% { left: 400px; top: 100px;  }
80% { left: 200px; top: 50px; }
100% { left: 100px; top: 200px;transform: scaleX(-1);}
}
#faintschool
{
position: absolute;
left: 50px;
top: 50px;
width: 45px;
height: 800px; 
animation: faintschool 20s linear infinite running;
transform: scaleX(1);
}
@keyframes faintschool
{
0% { left: 100px; top: 400px; }
10% { left: 200px; top: 400px; }
20% { left: 200px; top: 450px; }
30% { left: 200px; top: 400px; }
40% { left: 300px; top: 400px; }
50% { left: 400px; top: 350px; }
60% { left: 500px; top: 300px;  }
80% { left: 600px; top: 300px; }
100% { left: 700px; top: 250px; transform: scaleX(-1);}
}
#diver1
{
position: absolute;
left: 100px;
top: 200px;
width: 350px;
height: 800px; 
animation: diver1 5s linear infinite running;
transform: rotateX(180);
}
@keyframes diver1
{
0% { left: 100px; top: 200px; }
100% { left: 800px; top: 400px;}
}
#diver2
{
position: absolute;
left: 100px;
top: 200px;
width: 350px;
height: 800px; 
animation: diver2 7s linear infinite running;
transform: rotateX(50);
}
@keyframes diver2
{
0% { left: 50px; top: 50px; }
25% { left: 100px; top: 100px; }
50% { left: 900px; top: 300px; transform: rotateX(50);}
75% { left: 500px; top: 450px; transform: rotateX(50); }
100% { left: 900px; top: 300px; transform: scaleX(-1);}
}