CSS3同时两个动画

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>CSS3同时两个动画</title>
<style type="text/css">
div{
    margin:120px auto;
    width:60px;
    height:30px;
    background-color:#999;
    transform-origin:center top;
    animation:ani 3s infinite;
}
@keyframes ani{ 
    0%{transform:scale(3) rotateX(0deg);} 
    50%{transform:scale(2) rotateX(180deg);} 
    100%{transform:scale(1) rotateX(360deg);}
}
</style>
</head>
<body>
</body>
</html>

posted @ 2018-10-31 17:04  LineCat  阅读(343)  评论(0)    收藏  举报