css3 添加多个动画

CSS3是网页设计和开发的必备技术，它可以添加各种各样的效果和动画。其中，添加多个动画便是一种常用技巧。

/*定义一个元素*/.box{
    width: 100px;
    height: 100px;
    background-color: #00bcd4;
    position: relative;
    animation-duration: 2s;
     /*单个动画持续时间为2秒*/animation-fill-mode: forwards;
 /*动画结束时，保持最后一帧的状态*/}
/*定义第一个动画*/@keyframes move{
from{
    left: 0;
}
to{
    left: 200px;
}
}
/*定义第二个动画*/@keyframes rotate{
from{
    transform: rotate(0deg);
}
to{
    transform: rotate(360deg);
}
}
/*同时执行多个动画*/.box{
    animation-name: move, rotate;
     /*同时执行两个动画*/animation-iteration-count: infinite;
     /*重复执行动画*/animation-timing-function: linear;
 /*动画运动方式*/}
    

以上代码中，首先定义一个名为“box”的元素，并在其中添加了两个动画：move和rotate。动画的时间持续为2秒，结束后保持最后一帧的状态。动画的运动方式为线性，重复执行。

然后，我们定义两个“@keyframes”——move和rotate，分别控制元素的移动和旋转效果。最后，通过“animation-name”来同时执行两个动画。

这样，我们就实现了同时添加多个动画效果的操作。可以根据实际需求，添加更多的动画，使网页变得更加生动有趣。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！