Question

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

这是我用于第一个的代码，（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;
}

Answer 1

您没有关闭此@-webkit-keyframes mymove {请检查此fiddle

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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的浏览器上使用。

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

如何管理多个同步CSS动画

2 个答案: