html - 仅在 CSS 中运行同步动画

Question

我正在尝试同时运行两个动画。对我来说一切看起来都很完美，但它的行为真的很古怪，我不明白为什么。我想将所有内容都保留在 CSS 中。

如评论中所述，这是工作页面的当前版本:fallowproduction.com/cowabduction/csspractice1.html

它目前只能在 chrome 中 100% 工作，或者我想是 Safari。

CSS 表在这里:fallowproduction.com/cowabduction/practice1StyleSheet.css

如果您注意到，最左边的奶牛就是我正在处理的奶牛。当不明飞行物在他上方时，他应该向上移动(据我所知，所有时间都正确)。然而，他却慢慢消失了

代码摘录如下:

    .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; }

}

Answer 1

试试这个:

@-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; }

}