.shark {
    left: 100px;
    top: 400px;
    position: absolute;
    animation-name: Shark;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
@keyframes Shark {
    0% {left: 100px; top: 400px;}
    20% {left: 300px; top: 400px;}
    40% {left: 500px; top: 300px;}
    50% {left: 600px; top: 50px;}
    60% {left: 600px; top: 100px;}
    80% {left: 500px; top: 200px;}
    100% {left: 100px; top: 400px; transform: scaleX(-1);}
}
.turtle {
    left: 700px;
    top: 100px;
    position: absolute;
    animation-name: Turtle;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
@keyframes Turtle {
    0% {left: 0px; top: 100px;}
    30% {left: 20%; top: 300px;}
    50% {left: 45%; top: 400px;}
    70% {left: 70%; top: 300px;}
    90% {left: 90%; top: 200px;}
    100% {left: 100%; top: 100px;}
}
.bubble {
    left: 800px;
    top: 300px;
    position: absolute;
    animation-name: Bubble;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
@keyframes Bubble {
    0% {left: 800px; top: 300px; opacity: 1;}
    20% {left: 780px; top: 250px; opacity: 0.8;}
    40% {left: 760px; top: 200px; opacity: 0.6;}
    60% {left: 740px; top: 150px; opacity: 0.4;}
    80% {left: 720px; top: 100px; opacity: 0.2;}
    100% {left: 700px; top: 50px; opacity: 0;}
}
.bubble1 {
    left: 85px;
    top: 400px;
    position: absolute;
    animation-name: Bubble1;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
@keyframes Bubble1 {
    0% {left: 85px; top: 400px; opacity: 1;}
    20% {left: 65px; top: 350px; opacity: 0.8;}
    40% {left: 45px; top: 300px; opacity: 0.6;}
    60% {left: 25px; top: 250px; opacity: 0.4;}
    80% {left: 5px; top: 200px; opacity: 0.2;}
    100% {left: -15px; top: 150px; opacity: 0;}
}
.diver {
    left: 400px;
    top: 500px;
    position: absolute;
    animation-name: Diver;
    animation-duration: 12s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}   
@keyframes Diver {
    0% {left: 10%; top: 500px;}
    20% {left: 20%; top: 400px;}
    40% {left: 40%; top: 300px;}
    60% {left: 60%; top: 400px;}
    80% {left: 80%; top: 500px;}
    100% {left: 100%; top: 500px;}
}
.diver2 {
    left: 900px;
    top: 200px;
    position: absolute;
    animation-name: Diver2;
    animation-duration: 18s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
@keyframes Diver2 {
    0% {left: 0%; top: 200px;}
    20% {left: 20%; top: 300px;}
    40% {left: 40%; top: 400px;}
    60% {left: 60%; top: 300px;}
    80% {left: 80%; top: 200px;}
    100% {left: 100%; top: 100px;}
}
.diver3 {
    left: 200px;
    top: 100px;
    position: absolute;
    animation-name: Diver3;
    animation-duration: 14s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}   
@keyframes Diver3 {
    0% {left: 0%; top: 100px;}
    20% {left: 20%; top: 200px;}
    40% {left: 40%; top: 300px;}
    60% {left: 60%; top: 200px;}
    80% {left: 80%; top: 100px;}
    100% {left: 100%; top: 50px;}
}
.goldfish {
    left: 500px;
    top: 300px;
    position: absolute;
    animation-name: Goldfish;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
}   
@keyframes Goldfish {
    0% {left: 500px; top: 300px;}
    20% {left: 600px; top: 250px;}
    40% {left: 700px; top: 300px;}
    60% {left: 600px; top: 350px;}
    80% {left: 500px; top: 300px;}
    100% {left: 400px; top: 250px; transform: scaleX(-1);}
}