css3两种hover动画

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函数，先定义全局变量和函数，再按需调用。