css 动画过渡效果

/*transition: 要过渡的属性  花费时间 远动曲线 何时开始 ; 简写*/
/*transition-property: 要过渡的属性名称*/
/*transition-duration:  定义过渡花费的时间; 默认是0*/
/*transition-timing-function: 过渡效果的时间曲线 默认是 ‘ease’ ;  linear  ease ease-in ease-out ease-in-out  */
/*transition-delay: 过渡效果何时开始，默认是0;*/
div {
    margin:200px;
    width: 400px;
    height: 400px;
    font-weight:bold;">pink;
    /*transition:  要过渡的属性    花费时间       远动曲线            何时开始 ; 简写*/
    /*transition:width 1s ease-in-out  0s,  width 1s ease-in-out  0s ,background-color 1s ease-in-out 0s;*/
    /*简写 all */
    /*transition: all 1s ease-in-out  0s;*/

    /*简写 all */
    transition: all  0.5s;
}
div:hover {
    /*width: 800px;*/
    /*height: 250px;*/
    /**/
    margin-top: -50px;
}

.box-bd li {
    overflow: hidden;
}
.box-bd img {
    transition: all  0.2s;
}
/*鼠标经过图片往右走8px*/
.box-bd img:hover{
    margin-left: 8px;
}