添加两个CSS3动画？

我正在尝试将类似Minecraft的样式应用于div元素。最终的结果应该是这个样子的：“如果不正常则返回结束”消息：添加两个CSS3动画？

minecraft

快速旁注：对于那些你们谁没有玩过游戏，随机行从一个特定的文件被读取并且它的内容显示为当天的消息。它会进出并抓住你的注意力。

文字阴影，字体和跳动动画已完成。然而，当我尝试应用第二个动画，它将覆盖悸动动画（这意味着它不会感到紧张，但旋转）

我的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效果。

实现旋转效果而不忽略我的跳动效果的最佳方式是什么？

来源

2013-08-25 mattbdean

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

来源

2013-08-25 20:39:56 Christian

不过，最后一个动画/转换覆盖了第一个。如果我先设置了动画，然后旋转，它似乎只能旋转。如果首先应用旋转，情况会相反。 – mattbdean

在这种情况下，只需旋转容器。 – Christian

哦。 Hur dur。有点新，对不起：/ – mattbdean

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

您可以：

1）设置两个div，一个在另一个内部，并应用不同的变换，家长和孩子。

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

来源

2013-08-25 20:52:11 vals

添加两个CSS3动画？

回答

相关问题