Html 如何同时管理多个CSS动画

我试图在一个小横幅上同时运行几个动画。位置的改变，第一行文字的不透明度改变，另一行文字的简单不透明度改变，依此类推。问题是第一个动画工作得很好，而第二个动画（以及之后的所有动画）从未运行过。我使用了与第一个完全相同的代码，只是更改了动画和类的名称，但仍然不起作用

这是我在第一部分中使用的代码，（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>

---

您没有关闭此

@-webkit关键帧mymove{

检查此项

h1{
位置：相对位置；
右：0px；
-webkit动画：mymove1s；
/*铬、狩猎、歌剧*/
动画：mymove 1s；
动画计时功能：线性；
-webkit动画计时功能：线性；
}
/*铬、狩猎、歌剧*/
@-webkit关键帧mymove{
0% {
变换：不透明度：0；
}
25% {
转换：translate3d（90px，0px，0px）；
不透明度：0；
}
100% {
转换：translate3d（0px，0px，0px）；
不透明度：100；
}
}
氢{
位置：相对位置；
-webkit动画：mymove2 3s；
/*铬、狩猎、歌剧*/
动画：mymove2 3s；
动画计时功能：线性；
-webkit动画计时功能：线性；
}
/*铬、狩猎、歌剧*/
@-webkit关键帧mymove2{
0% {
不透明度：0；
}
50% {
不透明度：0；
}
100% {
不透明度：100；
}

智能旅行，

触手可及。
我们的Iphone和Ipad应用程序就在这里
今天就下载它。

我想这是由于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的浏览器上工作

缺少最后一个大括号，但不会将其视为错误（最后一个大括号/分号是可选的）

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