[分享]css3同时播放动画

CSS3同时播放动画CSS3提供了许多强大的动画功能，其中包括可以同时播放多个动画的功能。对于网站设计师来说，同时播放多个动画可以让它们的页面更加生动有趣。下面是一个实例代码，展示如何同时播放多个动画...

CSS3同时播放动画

CSS3提供了许多强大的动画功能，其中包括可以同时播放多个动画的功能。对于网站设计师来说，同时播放多个动画可以让它们的页面更加生动有趣。

下面是一个实例代码，展示如何同时播放多个动画：

.box {
    width: 200px;
    height: 200px;
    background-color: #f5f5f5;
    position: relative;
}

.animation1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: moveX 2s linear, moveY 2s ease-in-out;
}

.animation2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotate 1s linear infinite, changeColor 2s ease-in-out;
}

@keyframes moveX {
    0% { left: 0; }
    100% { left: 400px; }
}

@keyframes moveY {
    0% { top: 0; }
    100% { top: 200px; }
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes changeColor {
    0% { background-color: #f5f5f5; }
    50% { background-color: #ff9***; }
    100% { background-color: #f5f5f5; }
} 

在上面的代码中，我们创建了两个div元素，并为它们分别添加了两个动画。其中，.animation1元素会先移动到右边，再折返回来；.animation2元素会不停地旋转，并在动画过程中改变背景色。

在这里，我们使用了CSS3的animation属性来定义动画，并使用keyframes关键字来设定动画的关键帧，让它们达到预期的效果。

总结来说，CSS3同时播放动画是一个很有趣的特效，它可以让你的网站更加生动有趣。希望这篇文章对你有所帮助！