如何同时管理多个 CSS 动画答案

【问题标题】：How to manage multiple simultaneous CSS animations如何同时管理多个 CSS 动画
【发布时间】：2019-01-25 03:22:04
【问题描述】：

我正在尝试在一个小横幅中同时运行几个动画。位置变化，第一行文本的不透明度变化，另一行的简单不透明度变化，依此类推。问题是第一个动画效果很好，而第二个动画（以及之后的所有内容）永远不会运行。我使用了与第一个完全相同的代码，只是更改了动画的名称和类，但它仍然无法正常工作。

这是我用于第一个的代码，（H1 工作正常，但 h2、h3 和动画的其余部分不能）

我的 HTML

<h1> Smart travel, 
<br> at your fingertips. </h1>


<h2> Our app for Iphone and Ipad is here </h2>
<h3><strong>Download </strong> it today. </h3>

我的 CSS（顺便说一下，上面的一些行设置为 position: absolute）

h1 {
position: relative;
right: 0px;
-webkit-animation: mymove 1s ; /* Chrome, Safari, Opera */ 
animation: mymove 1s ;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
0% {
transform: opacity: 0;
}

25% {transform: translate3d(90px, 0px, 0px);
opacity:0;
}


100% {
transform: translate3d(0px, 0px, 0px);
opacity: 100;
}





h2 {
position: relative;
-webkit-animation: mymove2 3s ; /* Chrome, Safari, Opera */ 
animation: mymove2 3s ;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
 }

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove2 {
0% {
opacity: 0;
}

50% {
  opacity:0;
}


100% {
  opacity: 100;
}

【问题讨论】：

标签： html css animation

【解决方案1】：

你没有关闭这个@-webkit-keyframes mymove {检查这个fiddle

h1 {
    position: relative;
    right: 0px;
    -webkit-animation: mymove 1s;
    /* Chrome, Safari, Opera */
    animation: mymove 1s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}
/* Chrome, Safari, Opera */
 @-webkit-keyframes mymove {
    0% {
        transform: opacity: 0;
    }
    25% {
        transform: translate3d(90px, 0px, 0px);
        opacity:0;
    }
    100% {
        transform: translate3d(0px, 0px, 0px);
        opacity: 100;
    }
}
    h2 {
        position: relative;
        -webkit-animation: mymove2 3s;
        /* Chrome, Safari, Opera */
        animation: mymove2 3s;
        animation-timing-function: linear;
        -webkit-animation-timing-function: linear;
    }
    /* Chrome, Safari, Opera */
    @-webkit-keyframes mymove2 {
        0% {
            opacity: 0;
        }
        50% {
            opacity:0;
        }
        100% {
            opacity: 100;
        }

<h1> Smart travel, 
<br> at your fingertips. </h1>


<h2> Our app for Iphone and Ipad is here </h2>


<h3><strong>Download </strong> it today. </h3>

【讨论】：

【解决方案2】：

我猜这来自您的 CSS 代码中的错误：

transform: opacity: 0; /* Syntax error there */
/* should be */
opacity: 0;
transform: translate3d(0px, 0px, 0px); /* or whatever starting value you want */

您还应该注意，您已经为动画的关键帧添加了前缀 (@-webkit-keyframes mymove)，这仅适用于基于 wekbit 的浏览器。

缺少最后一个大括号，但不认为是错误（最后一个大括号/分号是可选的）。

【讨论】：