css3实现图形的动画效果

2015/12/14 40017

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>> 

css代码：

.image{
    width: 100px;
    height: 100px;
  /*  background-color: forestgreen;*/
    position: relative;
    -webkit-animation: anim 5s;
    -moz-animation: anim 5s;
    -ms-animation: anim 5s;
    -o-animation: anim 5s;
    animation: anim 5s infinite alternate;
    
}

@-webkit-keyframes anim {
    0%{
        background-color: aliceblue;
        left: 0px;
        top: 0px;
    }
    25%{
        background-color: aqua;
        left: 200px;
        top: 0px;
    }
    50%{
        background-color: blue;
        left: 200px;
        top: 200px;
    }
    75%{
        background-color: blueviolet;
        left: 0px;
        top: 200px;
    }
    100%{
        background-color: chartreuse;
        left: 0px;
        top: 0px;
    }
}

@-moz-keyframes anim{
    0%{
        background-color: aliceblue;
        left: 0px;
        top: 0px;
    }
    25%{
        background-color: aqua;
        left: 200px;
        top: 0px;
    }
    50%{
        background-color: blue;
        left: 200px;
        top: 200px;
    }
    75%{
        background-color: blueviolet;
        left: 0px;
        top: 200px;
    }
    100%{
        background-color: chartreuse;
        left: 0px;
        top: 0px;
    }
}

@-ms-keyframes anim {
    0%{
        background-color: aliceblue;
        left: 0px;
        top: 0px;
    }
    25%{
        background-color: aqua;
        left: 200px;
        top: 0px;
    }
    50%{
        background-color: blue;
        left: 200px;
        top: 200px;
    }
    75%{
        background-color: blueviolet;
        left: 0px;
        top: 200px;
    }
    100%{
        background-color: chartreuse;
        left: 0px;
        top: 0px;
    }
}

@-o-keyframes anim {
    0%{
        background-color: aliceblue;
        left: 0px;
        top: 0px;
    }
    25%{
        background-color: aqua;
        left: 200px;
        top: 0px;
    }
    50%{
        background-color: blue;
        left: 200px;
        top: 200px;
    }
    75%{
        background-color: blueviolet;
        left: 0px;
        top: 200px;
    }
    100%{
        background-color: chartreuse;
        left: 0px;
        top: 0px;
    }
}

HTML；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <link rel="stylesheet" type="text/css" href="css/style02.css">
</head>
<body>
<div class="contaner">
    <div class="image">

    </div>
</div>
</body>
</html>