transition／translate／transform／animation

因為自己剛開始接觸css3動畫時由於沒有仔細看過文件，經常將這幾個“屬性“混淆（如果完全不存在這個問題可以忽略）
1、首先要明確的是transition、transform、animation這三個都是css屬性，而translate是2D轉換的一種方法是transform的一個屬性值
2、transform是2D、3D變換的屬性，只是因為他經常與transition同時使用導致直觀上認為動畫（過渡）就是transform，但其實transform是動畫（過渡）可用的一種屬性就像height、opacity一樣（值得注意的是動畫中之所以常用transform而不直接使用height，是因為使用transform不會引起頁面的重排，可以提高效能）
3、transition、animation才是在動畫（過渡）中必備的兩個屬性

animation和transition的區別

1、transition更適用於簡單狀態的過渡
2、animation可以沒有觸發條件但是transition不可以，所以在例如頁面剛載入時的動畫可以使用animation
3、animation可以通過更多的引數實現更復雜的動畫效果，包括關鍵幀數、速度曲線、播放的次數、是否逆向播放等，（官方介紹中animation是transition屬性的擴充套件）

/* animation-test */
@keyframes myfirst
{
    from {background: green;}
    to {background
 
: yellow;}
}
.animation-test{
    width: 200px;
    height: 200px;
    background: green;
}
.animation-test:hover{
    animation: myfirst 1s;
}
/* transition-test */
.transition-test {
    width: 200px;
    height: 200px;
    background: green;
    transition: background 1s;
}
.transition-test:hover {
    background
 
: yellow;
}