CSS Note 2.2 transition和transform组合动画

一、CSS

@charset "UTF-8";

div{
    margin: 10px;
    padding: 10px;
    width: 160px;
    height: 80px;
    background: chartreuse ;

}
#div1:hover{
    background: green;
    width: 60px;
    transition-property: width;/*设定对宽度进行过渡*/
    transition-duration: 1s;/*设定过渡时间*/
    transition-timing-function: ease;/*加速过渡;ease-in以慢速开始的过渡，ease-out以慢速结束的过渡，ease-in-out以慢速开始和结束的过渡*/
    transition-delay: 0.5s;/*设定延时过渡时间*/
}
#div2:hover{
    background: blue;
    width: 60px;
    transition-property: all;/*对所有属性过渡*/
    transition-duration: 1s;
    transition-timing-function: linear;/*匀速过渡*/
}
#div3:hover{
    background: red;
    width: 60px;
    transition: background 3s ease-in-out 3s;/*延时3秒，过渡时间为2s，对背景颜色过渡，过渡是先慢后快再慢*/
}
#div4{
    margin: 4px;
    padding: 4px;
    width: 320px;
    height: 200px;
    background-color: lightyellow;
    border-radius: 10px;
    border: 2px brown dashed;
    vertical-align: middle;
}
img{
    width: 60px;
    height: 200px;
}
img:hover{
    position: relative;
    transform-origin: 50% 50%;
    transform: translate3D(200px, -50px ,100px) rotate3D(1,1,1,3600deg) scale(2);
    transition: transform 2s ease 0s;
    bottom: 20px;
}
@charset "UTF-8";

div{
    marg