css3动画效果

实例：

/*全部图片动画效果*/
.donghua{
    width: 180px;
    height: 110px;
    overflow: hidden;  
    -webkit-filter: brightness(100%);/*兼容*/
    filter: brightness(100%);/*初始大小*/
    float:left; 
}
.donghua img{  
    cursor: pointer;  
    transition: all 0.8s;/*规定变化时间*/
    -moz-transition: all 0.8s;/*兼容*/
    -webkit-transition: all 0.8s;  
}  
.donghua img:hover{  
    transform: scale(1.05);/*明暗程度*/
}  
.donghua:hover{
    -webkit-filter: brightness(110%);
    filter: brightness(110%);/*变化后大小*/
}

1、filter

 filter滤镜：

常用：

1、blur(px)高斯模糊

2、brightness(%)设置亮度

0%（全黑）——100%（正常）——>100%（加亮）

3、contrast（%）设置对比度

0%（全黑）——100%（正常）——>100%（对比度降低）

4、drop-shadow(h-shadow v-shadow blur spread color)（设置阴影）

2、transition

transition（过渡）

1、transition-property（规定设置过渡效果的css属性的名称）

2、transition-duration（规定完成过渡的时间）

3、transition-timing-function（规定速度的效果）

4、transition-delay（定义过度何时开始）

3、transform

transform（2D 3D转化）

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

小实例：

360°旋转

/*旋转动画*/
.zhuanzhuanzhuan{
    width: 66px;
    height: 66px;
    float: left;
    position: absolute;
    top: 0px;
    left: 35%;
    background:url(../../img/spr.png);
    background-size: 66px 66px;
}
.xuanzhuan{
    position: absolute;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: -2s;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-iteration-count:infinite;
    animation-play-state: running;
    animation-name: xuanzhuan;
}
/*关键帧*/
@-webkit-keyframes xuanzhuan{
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}