如何同时触发多个CSS动画？

同时触发多个 CSS 动画

处理 CSS 动画时，通常需要同时执行多个动画。这可以通过利用动画属性来实现。

代码结构

要同时触发两个动画，可以在动画声明中使用逗号分隔的列表，如下所示：

animation: rotate 1s, spin 3s;

在这种情况下，旋转和旋转动画都将应用于指定的元素。每个动画都将保留其预定义的属性，例如持续时间和计时函数。

演示实现

为了说明这个概念，请考虑以下示例代码：

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation: spin 2s linear infinite, scale 4s linear infinite;
}

@-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
}

@-webkit-keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}

这里，使用逗号在 -webkit-animation 属性中定义多个动画。旋转动画将每 2 秒旋转图像一次，而缩放动画将每 4 秒将其尺寸加倍。

现场演示

要查看此效果的实际效果，请参阅以下 URL： http://jsfiddle.net/Ugc5g/3392/

以上是如何同时触发多个CSS动画？的详细内容。更多信息请关注PHP中文网其他相关文章！