css - 添加两个 CSS3 动画？

Question

我正在尝试将类似 Minecraft 的样式应用于div元素。最终结果应该类似于“如果不行，则返回结束”消息：

快速旁注：对于那些没有玩过游戏的人，从特定文件中随机读取一行，并将其内容显示为当天的消息。它跳进跳出，吸引你的注意力。

文字阴影、字体和跳动动画已经完成。但是，当我尝试应用第二个动画时，它会覆盖跳动动画（意味着它不会跳动，而是旋转）

我的CSS如下：

#random-message {
    /* font/text stuff */
    animation:minecraft, minecraft-rotate 0.5s infinite;
    -webkit-animation:minecraft 0.5s infinite; /* Safari and Chrome */
}

动画minecraft应用transform: scale效果，并minecraft-rotate应用transform: rotate效果。

在不覆盖我的跳动效果的情况下实现旋转效果的最佳方法是什么？

Answer 1

你不想有一个旋转动画......你想旋转 div。只需将transform: rotate(340deg);行添加到 css 块。

Answer 2

任何给定元素在任何给定时间只能有一个变换。任何同时设置 2 个变换的尝试都将导致其中一个被覆盖。

你可以：

1) 设置两个 div，一个在另一个内部，并对父级和子级应用不同的变换。

2）构建复合变换。在动画的情况下，这意味着为每一帧创建复合变换。