添加两个CSS3动画？

Question

我正在尝试将类似Minecraft的样式应用于div元素。最终结果应该类似于“if not ok then return end”消息：

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

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

我的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）构建复合变换。在动画的情况下，这意味着为每个帧创建复合变换。