css3动画animation

chuaie3795

于 2017-07-27 10:55:00 发布

阅读量69

点赞数

原文链接：https://my.oschina.net/u/3628277/blog/1490195

版权

css3动画animaton css样式如下:

.div01 {
    width: 200px;
    height: 200px;
    background: rebeccapurple;
    color: #fff;
    position: relative;
    /*animation:
     *animation-name: 规定需要绑定到选择器的 keyframe 名称
     *animation-duration:规定完成动画花费 时间s 
     *animation-timing-function：规定动画的速度曲线
     *animation-delay：规定在动画开始之前的延迟，允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画
     *infinite规定动画应该无限次播放，也可直接输数值   
     *animation-direction 属性： alternate动画轮流反向播放,normal正常顺序播放（默认）*/
    animation: ani 5s infinite alternate;
    -webkit-animation: ani 5s infinite alternate;
}

@keyframes ani {
    0% {
        background: red;
        top: 0;
        left: 0;
    }
    25% {
        background: mistyrose;
        top: 0;
        left: 200px;
    }
    50% {
        background: yellow;
        top: 200px;
        left: 200px;
    }
    75% {
        background: brown;
        top: 200px;
        left: 0;
    }
    100% {
        background: mistyrose;
        top: 0;
        left: 0;
    }

}