最近老沈可是很久没有写java代码了，在完成一部分前端的工作，熟悉我的人都知道，前端比较差，最基本的东西还是懂得，但是没有认真去
学过html5和css3，一个学校的项目由于人事的原因从最初的2人变成只有我自己，一个完善的教师满意度打分系统，前端和后台分离，目前后台大部分
功能已实现，就只是前端的，所以就今天写了一个css3的anmition动画写的一个简单的div块旋转到中央的一个效果还是挺别致的。

粘贴一下代码，原div块的position 要给顶一个最终位置，比如说要把这个块的最终位置设置在中间

ready{

border-radius: 6px;
width: 444px;
height: 430px;
background:#fff;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
/*让块旋转*/
-webkit-animation: divrotate 1.3s; /*Safari and Chrome*/

}
最后一句代码就是兼容mac浏览器和谷歌浏览器的代码
divrotate是动画名称 1.3s是整个动画运行的时间
下面我们就开始定义动画
@keyframes divrotate {

0%{
    transform:rotate(90deg);
    -ms-transform:rotate(90deg);     /* IE 9 */
    -moz-transform:rotate(90deg);    /* Firefox */
    -o-transform:rotate(90deg);
    width:30px;
    height: 30px;

}
25%{
    transform:rotate(180deg);
    -ms-transform:rotate(180deg);     /* IE 9 */
    -moz-transform:rotate(180deg);    /* Firefox */
    -o-transform:rotate(180deg);
    /*让块往右走*/
    left:12%;
    width:100px;
    height: 100px;
}
50%{
    transform:rotate(270deg);
    -ms-transform:rotate(270deg);     /* IE 9 */
    -moz-transform:rotate(270deg);    /* Firefox */
    -o-transform:rotate(270deg);
    /*让块往右走*/
    left:24%;
    width: 180px;
    height: 180px;
}
75%{
    transform:rotate(300deg);
    -ms-transform:rotate(300deg);     /* IE 9 */
    -moz-transform:rotate(300deg);    /* Firefox */
    -o-transform:rotate(300deg);
    /*让块往右走*/
    left:48%;
    width: 280px;
    height: 280px;
}
100% {
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);   /* IE 9 */
    -moz-transform:rotate(360deg);  /* Firefox */
    -o-transform:rotate(360deg);
    /*让块往右走*/
    left:34%;
    width: 444px;
    height: 430px;
}

}

定义动画带起始式是@keyframes divrotate
后面跟的是动画名称
然后每个百分比之间的样式就是，动画在经行的进度之内做出的操作，还是比较简单的
css虽然好写，但是要写出非常nice的效果，就非常需要一个很好的思路和创意

好了，这几天会持续发表一些学习ReactJS的心得。