css3 如何给图片加入关键帧 使图片能够平缓的放大缩小并保持循环

html-css013

css3 如何给图片加入关键帧 使图片能够平缓的放大缩小并保持循环,第1张

先将你需要组合的图片编号，如M1-M10。就按你的需要连接的动画从头到尾进行编号放到一个文件夹下，在软件中“导入到舞台”选中其中一张图片进行导入，软件会自动根据你文件编号判断该文件夹中的文件可能是序列文件并提示你是否将其全部导入，你选择“是”软件即将全部图片按顺序建立每张图片的关键帧并自动形成动画。

这个只用css不能完全实现，的配合js的定时器来完成，下面是代码：

<!DOCTYPE html>  

<html>  

<head>  

    <title>HTML5</title>  

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />  

    <style type="text/css">

        img{width: 200px}

        .div1{width: 200pxheight: 200pxborder:1px solid #000margin: 150px auto}

        .animate1{

            -webkit-animation:  move1 2s infinite

        }

        .animate2{

            -webkit-animation:  move2 1s infinite

        }

        @-webkit-keyframes move1{

            0%{

                -webkit-transform:scale(1)

            }

            100%{

                -webkit-transform:scale(1.5)

            }

        }

        @-webkit-keyframes move2{

            0%{

                -webkit-transform: rotateZ(0deg) scale(1.5)

                -webkit-transform:

            }

            100%{

                -webkit-transform: rotateZ(360deg) scale(1.5)

            }

        }

    </style>

</head>  

<body> 

    <div class="div1 animate2"></div>

    <script type="text/javascript">

        window.onload=function(){

            var oDiv=document.querySelector(".div1")

            oDiv.className="div1 animate1"

            setTimeout(function(){

                oDiv.className="div1 animate2"

            },2000)

        }

    </script>  

</body>  

</html>

原理是：当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。

当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。