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

html-css010

css3 如何同时写多个动画效果,第1张

@keyframes bg1icon8_move{

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

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

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

}

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

<!DOCTYPE HTML>

<html lang="en-US">

<head>

 <meta charset="UTF-8">

 <title></title>

</head>

<body>

 <style type="text/css">

        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)}

        }

    </style>

    <div></div>

</body>

</html>

在w3school上面查到一下，CSS3中的动画由animation和@keyframes 结合实现出来的。以往项目已来，一直做的是单个动画，现在讲解一下两个动画效果如何组合在一起

首先了解一下animation的所有属性 W3school是这样定义的：

然后我们用@keyframes 规则来创建两个我们要执行的动画

接下来我们把写好的两个效果捆绑在“div”元素上 ， 如下：

这样效果就完成了。

【PS】这里并没有写兼容，说一下浏览器兼容。