CODEWITHSUNDEEP
htmlcssanimationstylesheet
JVE999
JVE999

Reputation: 3517

Run simultaneous animations in only CSS

I'm trying to run two animations at the same time. Everything looks perfect to me, but it acts really wacky and I can't figure out why. I want to keep the entire thing in CSS.

As posted in the comments, Here's the current version of the working page: fallowproduction.com/cowabduction/csspractice1.html

It currently only works 100% in chrome, or I suppose Safari.

The CSS sheet is here: fallowproduction.com/cowabduction/practice1StyleSheet.css

If you notice, the cow on the far left is the one I'm working on. He's supposed to move upwards when the UFO is over him (it's all timed correctly as far as I can tell). However, instead he just slowly disappears

Here's the excerpt from the code:

    .ufo {
left: 0px;
top: 0px;
z-index: 25;
left: 0px;
top: 0px;
width= 225px; 
height= 142px;
position: absolute;

animation: move_ufo 180s ease 0 1;
-moz-animation: move_ufo 180s ease 0 1; /* Firefox 4 */ 
-webkit-animation: move_ufo 180s ease 0 1; /* Safari and Chrome */
-o-animation: move_ufo 180s ease 0 1; /* Opera */

}


@-webkit-keyframes move_ufo {
    0% { left: 0px; top: 0px; }   /* Move to cow6 */
    1.75% { left: 456px; top: 10px; }
    4.55% { left: 456px; top: 10px; }   /* Move to cow2 */
    6.29% { left: 103px; top: 92px; }
    9.09% { left: 103px; top: 92px; }   /* Move to cow7 */
    10.84% { left: 566px; top: 110px; }
    13.64% { left: 566px; top: 110px; }   /* Move to cow4 */
    15.38% { left: 316px; top: -1px; }
    18.18% { left: 316px; top: -1px; }   /* Move to cow1*/
    19.93% { left: 4px; top: 61px; }
    22.73% { left: 4px; top: 61px; }   /* Move to cow8*/
    24.48% { left: 166px; top: 154px; }
    27.27% { left: 166px; top: 154px; }   /* Move to cow5*/
    29.02% { left: 458px; top: 10px; }
    31.82% { left: 458px; top: 10px; }   /* Move to cow10 */
    33.57% { left: 197px; top: -16px; }
    36.36% { left: 197px; top: -16px; }   /* Move to cow3*/
    38.11% { left: 217px; top: 68px; }
    40.91% { left: 217px; top: 68px; }   /* Move to cow9*/
    42.66% { left: 573px; top: -2px; }
    45.45% { left: 573px; top: -2px; }   /* Move */
    47.20% { left: 333px; top: 55px; }
    50.00% { left: 371px; top: 48px; }   /* Move to cow1*/
    51.75% { left: 4px; top: 61px; }
    54.55% { left: 4px; top: 61px; }   /* Move to cow7*/
    56.29% { left: 566px; top: 110px; }
    59.09% { left: 566px; top: 110px; }   /* Move to cow4*/
    60.84% { left: 316px; top: -1px; }
    63.64% { left: 316px; top: -1px; }   /* Move to cow8*/
    65.38% { left: 166px; top: 154px; }
    68.18% { left: 166px; top: 154px; }   /* Move to cow6*/
    69.93% { left: 456px; top: 10px; }
    72.73% { left: 456px; top: 10px; }   /* Move to cow10*/
    74.48% { left: 197px; top: -16px; }
    77.27% { left: 197px; top: -16px; }   /* Move to cow2 */
    79.02% { left: 103px; top: 92px; }
    81.82% { left: 103px; top: 92px; }   /* Move to cow5*/
    83.57% { left: 458px; top: 10px; }
    86.36% { left: 458px; top: 10px; }   /* Move to cow9*/
    88.11% { left: 573px; top: -2px; }
    90.91% { left: 573px; top: -2px; }   /* Move to cow3*/
    92.66% { left: 217px; top: 68px; }
    95.45% { left: 217px; top: 68px; }   /* Move */
    97.20% { left: 300px; top: 25px; }   
    100% { left: 0px; top: 0px; }   /* Original Location */

}





/* Cows and tractor beams */

.cow1 {
left: 80px;
top: 450px;
position: absolute;
z-index: 4;

/* Animation */
animation: move_cow1 180s;
-moz-animation: move_cow1 180s; /* Firefox 4 */ 
-webkit-animation: move_cow1 180s ease 0 1; /* Safari and Chrome */
-o-animation: move_cow1 180s; /* Opera */
}

@-webkit-keyframes move_cow1 {
    0% { left: 80px; top: 450px; } 
    19.93% { left: 80px; top: 450px; } /* UFO is at cow1 */
    22.73% { left: 80px; top: 61px; }  /* cow1 is being lifted */
    22.74% { opacity: 0; ; } /* cow1 disappears */

    51.75% { left: 4px; top: 61px; }
    54.55% { left: 4px; top: 61px; }   /* Move to cow7*/
    100% { left: 80px; top: 450px; }

}

Upvotes: 1

Views: 721

Answers (1)

TildalWave
TildalWave

Reputation: 1667

Try this:

@-webkit-keyframes move_cow1 {
    0% { opacity: 1; left: 80px; top: 450px; } 
    19.93% { opacity: 1; left: 80px; top: 450px; } /* UFO is at cow1 */
    22.73% { opacity: 1; left: 80px; top: 61px; }  /* cow1 is being lifted */
    22.74% { opacity: 0; } /* cow1 disappears */

    51.75% { left: 4px; top: 61px; }
    54.55% { left: 4px; top: 61px; }   /* Move to cow7*/
    100% { left: 80px; top: 450px; }

}

Upvotes: 1

Related Questions