css3 如何同时写多个动画效果
答案:1 悬赏:60 手机版
解决时间 2021-04-05 00:28
- 提问者网友：孤凫
- 2021-04-04 07:07
css3 如何同时写多个动画效果
最佳答案
- 五星知识达人网友：刀戟声无边
- 2021-04-04 08:07
@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);}
}
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);}
}