How to have two css animations in one tag

I am working with css animations and I have a series of animations with different css tags. I start at #water then go to other animations then I want to go back to #water with a different animation. This is my code:

#water {
    position: relative;
    left: 48px;   
    z-index: 1;
    opacity: 0;
    width: 197px;
    -webkit-animation: squeez 2s 1s 1 forwards;
    -moz-animation: squeez 2s 1s 1 forwards;
    -o-animation: squeez 2s 1s 1 forwards;
    -webkit-animation: fadeOut 10s 10s 1 forwards;
    -moz-animation: fadeOut 10s 10s 1 forwards;
    -o-animation: fadeOut 10s 10s 1 forwards;
}

It does not work how I want it to. The code is disregarding the first animation "squeez" and only doing the animation "fadeOut" which messes everything up. Any ideas on how to make this work?