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);
    }
}