1.先定義動畫，再呼叫動畫。這類似javascript的函式呼叫。

1.1/*先命名css動畫，此處我隨意命名為hover-zoom,*/
@-webkit-keyframes hover-zoom{
    50%{
        -webkit-transform:scale(0.8);
        transform:scale(0.8);
        -webkit-filter:brightness(60%)
        }
    100%{
        -webkit-transform:scale(1);
        transform:scale(1);
        /*css3濾鏡亮度百分比*/
        -webkit-filter:brightness(100%)
        }
}

1.2/*呼叫CSS3動畫,並設定動畫引數（名稱、持續時間、線性函式、執行次數）*/
.hover-zoom:hover{
    -webkit-animation-name:hover-zoom;
    animation-name:hover-zoom;
    -webkit-animation-duration:.5s;
    animation-duration:.5s;
    -webkit-animation-timing-function:ease-in;
    animation-timing-function:ease-in;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1
}

2.直接用transform設定動畫，用transition定義動畫，類似於上面第一種的步驟。

2.1/*原動畫物件，注意此處的transition是用於動畫結束後有線性還原效果*/
.item{
    padding:20px;
    text-align: center;
    background-color: #f0f0f0;
    margin-bottom: 20px;
    box-shadow: 0px 0px 15px #cdcdcd;
    transition: all 0.5s ease-in-out;
}

2.2/*動畫和呼叫可以寫在一起，transition設定動畫引數（屬性物件、時間、線性）*/
.item:hover{
    -webkit-transform:translateY(-6px);
    transform: translateY(-6px);
    background-color: #fff;
    transition: all 0.5s ease-in-out;
}

小夥伴們可以根據實際情況使用這兩種方式，第一種適合大型專案，類似JS函式，先定義全域性變數和函式，再按需呼叫。