.father{width:1200px;height:550px;margin:0px auto;border:1px solid #ccc; margin-top:20px;}
.father ul li{list-style: none outside none;}
.father li{float:left;width:220px;margin-left:17px;margin-top:25px; height:240px;}
.father img{width:220px;height:220px;}
 
ul[data-liffect="zoomIn"] li {
    opacity: 0;
    position: relative;
    -webkit-animation: zoomIn 600ms ease both;
    -webkit-animation-play-state: paused;
    -moz-animation: zoomIn 600ms ease both;
    -moz-animation-play-state: paused;
    -o-animation: zoomIn 600ms ease both;
    -o-animation-play-state: paused;
    animation: zoomIn 600ms ease both;
    animation-play-state: paused;
}

ul[data-liffect="zoomIn"].play li {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes zoomIn {
    0% { opacity: 0; -webkit-transform: scale(1.8); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}

@-moz-keyframes zoomIn {
    0% { opacity: 0; -moz-transform: scale(1.8); }
    100% { opacity: 1; -moz-transform: scale(1); }
}

@-o-keyframes zoomIn {
    0% { opacity: 0; -o-transform: scale(1.8); }
    100% { opacity: 1; -o-transform: scale(1); }
}

@keyframes zoomIn {
    0% { opacity: 0; transform: scale(1.8); }
    100% { opacity: 1; transform: scale(1); }
}