css3 如何同时写多个动画效果

2025-12-05 15:48:14
推荐回答(2个)
回答1:

@keyframes bg1icon8_move{

0%{transform:scale(3) rotateX(0deg);}

50%{transform:scale(2) rotateX(180deg);}

100%{transform:scale(1) rotateX(360deg);}

}

中间用空格隔开就行了, 下面是完整的例子




 
 


 
        div{
            margin:120px auto;
            width:60px;
            height:30px;
            background-color:#999999;
            transform-origin:center top;
            animation:bg1icon8_move 3s infinite;
        }
        @keyframes bg1icon8_move{ 
            0%{transform:scale(3) rotateX(0deg);} 
            50%{transform:scale(2) rotateX(180deg);} 
            100%{transform:scale(1) rotateX(360deg);}
        }
    
    


回答2:

教你如何快速制作一个多个视频一个画面同时播放的效果