#cray {
    display: none;
    position: relative;
    z-index: 6;
    margin-left: -40px;
    margin-top: -20px;
}

#cray image {
    position: relative;
    z-index: 4;
}

@keyframes rotateBoat {
    0% {
        transform:translate(-40px, -20px) rotateY(0deg);
    }

    100% {
        transform:translate(-40px, -20px) rotateY(180deg);
    }

}

#cray {
    transform:translate(-40px, -20px) rotateY(0deg);
    transform-origin: 40px 20px;
}

.startAnimate2 #cray {
    -webkit-animation: rotateBoat 0.5s 0s linear forwards;
    animation: rotateBoat 0.5s 0s linear forwards;
}