CSS 动画示例

一个动画示例，球沿着边框跑：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS  animation</title><!--20180308 10:01-->
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            border:1px solid red;
            margin:120px auto;
        }
        span{
            display: inline-block;
            width:20px;
            height:20px;
            background: orange;
            border-radius: 100%;
            animation:movearound 5s linear 2s infinite alternate;
            -webkit-animation:movearound 5s linear 2s infinite alternate;/*infinite是无限循环，数字是循环几次*/
            -moz-animation: movearound 5s linear 2s infinite alternate;/*alternate是奇数次的时候向前播放，偶数次向后播放*/
            -o-animation: movearound 5s linear 2s infinite alternate;
            animation-fill-mode:forwards;/*forwards是动画结束时保持最后一刻的状态；backwords是在动画有延迟播放的情况下，开始播放时迅速具有初始帧；both是元素同时具有forwards和backwords的属性'None是默认回到初始帧*/

        }
        @keyframes movearound{
            0%{
                transform:translateX(0);
            }
            25%{
                transform:translateX(180px);
            }
            50%{
                transform:translate(180px,180px);
            }
            75%{
                transform:translate(0,180px);
                background: blue;
            }
            100%{
                transform:translateY(0);
                background: red;
            }
        }
    </style>
</head>
<body>
<div><span></span></div>
</body>
</html>

　　

posted @ 2018-03-08 10:02  potato~e-e  阅读(151)  评论(0)  编辑  收藏  举报