一个动画效果

这个动画效果怎么写

javascript css

阅读 1.9k

2 个回答

得票最新

nicezhu

83621739

发布于
2017-02-19

<style>
    #an{
        width: 100px;
        height: 100px;
        background-color: #0a628f;
        border-radius: 50%;
        animation: myfirst 5s;
        animation-iteration-count:infinite;
    }

    @keyframes myfirst
    {
        from {background: yellow;}
        50%{
            background-color: #000a28;
            -webkit-transform: translate(200px);
            -moz-transform: translate(200px);
            -ms-transform: translate(200px);
            -o-transform: translate(200px);
            transform: translate(200px);
            width: 200px;
            border-radius: 20px;
        }
        to {

            -webkit-transform: translate(300px);
            -moz-transform: translate(300px);
            -ms-transform: translate(300px);
            -o-transform: translate(300px);
            transform: translate(300px);
            width: 200px;
            height: 130px;
            border-radius: 20px;
        }
    }

</style>
<body>
  <div id="an"></div>
</body>