Css动画
<style type="text/css">
p{
width:100px;
height:100px;
background-color:green;
}
p:hover{
animation-duration:1s;
animation-delay:200ms;
animation-name:xx
animation-iteration-count:infinite; 【无限循环的意思，也可以写成2，动两次，也可以是3】
animation-direction:alternate;【变大之后再变小】
}
@keyframes xx {
from{
width:150px; 这串代码的意义在于小方块变成大方块，不是简单的从小
height:150px; 变大再变小，而是从小变中再变大；再从大变中变大，
background-color:blue; 执行from-to代码。相当于设计了一个中间缓冲值 。
}
50%{
width:170px;
height:170px; 和from和to一起执行形成一个四次循环。
background-color:black;
}
75%{
width:195px;
height:195px;
background-color:yellow;
}
to{
width:200px;
height:200px;
background-color:orange;
}
}
</style>
_______________________________________________________________________________
想让动画实现我们鼠标点击之后不会到原来的形态：animation-fill-mode:forwards;
opacity:xx 透明度的意思，如果写1的话就是不透明
