css trasnstion

1、指定添加效果的css属性
2、指定效果持续时间
transtion： opacity 0.5s;
类似图中效果制作，划过出现文字以及边框
代码如图：
.effect-bubba{
position：relative；
}
.effect-bubba:before,.effect-bubba:after{
content：" ";
position：absolute;
top：10px；
left：10px；
right：10px；
bottom：10px；
opacity：0；
transition：opacity 0.5s， transform 0.5s；
}
.effect-bubba:before{
border-top:1px solid #333333;
border-bottom:1px solid #333333;
transform:scale(0,1);
}
.effect-bubba:after{
border-left：1px solid #333333;
border-right：1px solid #333333；
transform：scale（1,0）；
}
.music-grids：hover>.effect-bubba:before,
.music-grids：hover>.effect-bubba:after,{
opacity：1；
transform：scale（1）；
}
thats all