@keyframes chWidth {
    from{
        width: 60px;
    }to{
        width: 300px;
    }
}
@keyframes spin{
    from { transform: rotate(30deg) }
    to { transform: rotate(0deg) }
}
@keyframes spin2 {
    from { transform: rotate(0deg) }
    to { transform: rotate(-30deg) }
}
.div-demo1{
    display: inline-block;
    // position: absolute;
    // z-index: 999999999999999;
    // left: 0px;
    
    // width: 60px;
    color: blue;
    border: 1px solid red;
    &:hover{
        // opacity: 0.9;
        // z-index: 999999999999999;
        // position: absolute;
        transform: translateZ(0);
        animation: chWidth 2s;
        // transform: translate(300px,0)
    }
    transition: all 2s cubic-bezier(0,0,1,1);
}
.div-demo2{
    display:none;
    position: absolute;
    top: 30px;
    left: 0px;
    &:hover{
        left: 300px;
        // transition: left 300px ;
    }
    transition: all 2s cubic-bezier(0,0,1,1);
}
.demo-containner{
    width: 100%;
    margin: auto;
    font-size: 14px;
    font-family: 'PingFangSC-Regular','MicroSoft YaHei';
    .demo-item{
        display: inline-block;
        width: 200px;
    }
    .demo-header{
        color: #ad9088;
        text-align: center;
        span{
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 30px;
            background: #ededed;
        }
        .outer1{
            animation: spin 0.5s infinite ease-in-out;
            transform-origin: 50% -75px;
            animation-direction:alternate;
        }
        .outer5{
            animation: spin2 0.5s infinite ease-in-out 1s;
            transform-origin: 50% -75px;
            animation-direction:alternate;
        }
    }
    .demo-item-component{
        border: 1px solid #ababab;
        text-align: center;
        margin: 10px;
    }

}