【动画练习之cssQ弹效果】

---

前言

汤姆猫小练习之css弹动画效果

style
.father{
margin-top: 250px;
margin-left: 450px;
}
.father div{
float: left;
text-align: center;
padding-right: 20px;
}

@keyframes change{
   0%{
    transform: scale(0.8,1.1);
     }
   20%{
    transform: scale(1.1,0.8);  
     }
   40%{
    transform: scale(0.8,1.1);
     }
   60%{
    transform: scale(1.1,0.8);
     }
   80%{
    transform: scale(0.8,1.1);
     }
   100%{
    transform: scale(1.1,0.8);
     }
}

 img:hover{
    animation-name: change;
    animation-duration: 2s;
}
#img1{
    width: 120px;
    height: 100px;
    border-radius: 10px;
    
}
#img2{
    width: 120px;
    height: 100px;
    border-radius: 10px;
}
#img3{
    width: 120px;
    height: 100px;
    border-radius: 10px;
}
#img4{
    width: