css3 动画效果 

js动画代码复杂，css3的推出transition,transform后。简单2行，也可以有炫酷动画了。

下面我就是结合个人理解进行介绍。最后个人做的一个动画demo

css3的动画事例主要需要理解animation：可以算是动画的声明部分。你可以把动画属性的内容全部写到后边，动画的属性主要有：animation-name animation-duration还有一些动画延时，动画播放次数。这些要根据动画效果进行添加。 

格式有：animation:animation-name animation-duration按属性顺序写就ok了。 

动画内容格式：

@keyframes animation-name{  动画值}

对于不同浏览器要用不同的前缀。

对于想要改变动画效果位置的，需要在元素上做position:relative 的声明效果。 



<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        div {

            width: 100px;      

            height: 100px;

            margin-top: 100px;

            position: relative;

            background-color: red;

            animation:myfirst 2s linear 2s infinite alternate;  //动画名为myfirst 动画时长2秒，匀速，延时2秒，无即播放。

            -webkit-animation:myfirst 2s;  //safari 浏览器适用。如果想适用其它浏览器，用-moz- 火狐 －0-opear

            }

        @keyframes myfirst{

        0%{background:red;transform:rotate(0);left: 0px;top: 0px; }

        15%{background: greenyellow;transform:rotate(15deg);left: 0px;top: 0px;}

        50%{background: greenyellow;transform:rotate(15deg);left: 300px;top: 0px;}

        100%{background:red;transform:rotate(-360deg);left: 0px;top:0px; }

        @-webkit-keyframes myfirst{

            0%{background:red;transform:rotate(0);left: 0px;top: 100px; }

            15%{background: greenyellow;transform:rotate(15deg);left: 0px;top: 0px;}

            50%{background: greenyellow;transform:rotate(15deg);left: 300px;top: 0px;}

            100%{background:red;transform:rotate(-360deg);left: 0px;top:0px; }

        }

        @-moz-keyframes myfirst{

            0%{background:red;transform:rotate(0);left: 0px;top: 100px; }

            15%{background: greenyellow;transform:rotate(15deg);left: 0px;top: 0px;}

            50%{background: greenyellow;transform:rotate(15deg);left: 300px;top: 0px;}

            100%{background:red;transform:rotate(-360deg);left: 0px;top:0px; }

        }

        @-o-keyframes myfirst{

            0%{background:red;transform:rotate(0);left: 0px;top: 100px; }

            15%{background: greenyellow;transform:rotate(15deg);left: 0px;top: 0px;}

            50%{background: greenyellow;transform:rotate(15deg);left: 300px;top: 0px;}

            100%{background:red;transform:rotate(-360deg);left: 0px;top:0px; }

        }

    </style>

</head>

<body>

<div id="myfirst">

 hello word!

</div>

</body>

</html>