css animation transform

1.animation 阮一峰讲案

CSS Transition
--------------
CSS Animation
-------------

2.css3波浪动画特效

http://www.bootstrapmb.com/item/4308/preview

3.jQuery粒子背景插件circleMagic.js

http://www.jq22.com/jquery-info16175

4.注解

transform 动画动做
transition 动画时长，两者须要组合，让transform有个过渡

5.动画案例集
案例持续补充中...
6.呼吸效果

.breath{
animation: living 3s linear infinite;
}

/* 呼吸 */
@keyframes living {
    0%{
        transform: scale(1);
        opacity: 1;
    }
    50%{
        transform: scale(1.3);
        opacity: 0.8; 
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}

7.旋转动画

.cirle{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}
@keyframes rotate {
    from{
    transform:rotateZ(0deg);
    }
    to{
    transform:rotateZ(360deg);
    }
}