body {
    overflow: hidden;
}

img {
    max-width: 100%;
}

.striper {
    width: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    bottom: 40px;
}

.swim {
    -webkit-animation-name: swim;
    -webkit-animation-duration: 2.5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0.5s;
    -webkit-animation-fill-mode: both;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-play-state: running;
}

    /*.swim:hover {
        -webkit-animation-play-state: paused;
    }*/

@-webkit-keyframes swim {
    0% {
        -webkit-transform: translate(300%, 100%) rotate(60deg) scale(.8)
    }

    10% {
        -webkit-transform: translate(220%, 60%) rotate(50deg) scale(.75)
    }

    20% {
        -webkit-transform: translate(180%, 0%) rotate(40deg) scale(.7)
    }

    30% {
        -webkit-transform: translate(130%, -10%) rotate(30deg) scale(.65)
    }

    40% {
        -webkit-transform: translate(80%, -20%) rotate(20deg) scale(.6)
    }

    50% {
        -webkit-transform: translate(20%, -25%) rotate(10deg) scale(.55)
    }

    60% {
        -webkit-transform: translate(-50%, -30%) rotate(0deg) scale(.5)
    }

    70% {
        -webkit-transform: translate(-90%, -35%) rotate(-5deg) scale(.45)
    }

    80% {
        -webkit-transform: translate(-120%, -37%) rotate(-10deg) scale(.42)
    }

    90% {
        -webkit-transform: translate(-150%, -39%) rotate(-15deg) scale(.39)
    }

    100% {
        -webkit-transform: translate(-180%, -40%) rotate(-20deg) scale(.36)
    }
}