html, body {

    width: 100%;

    height: 100%;

}

​

body {

    display: flex;

}

​

.g-wrap {

    position: relative;

    width: 100px;

    height: 100px;

    margin: auto;

}

.g-flag:hover ~ .g-box {

    transform: translate(0, 0);

    transition: 0s;

}

​

.g-box {

    width: 100px;

    height: 100px;

    background: #000;

    user-select: none;

    transform: translate(100px, 100px);

    transition: 9999s 9999s;

}

​

.g-flag {

    position: absolute;

    width: 0;

    height: 0;

    line-height: 100px;

    text-align: center;

    top: 0;

    left: 0;

    border: 0 dashed #000;

    overflow: hidden;

    box-sizing: border;

    transition: 0 0.5s;

}

​

.g-wrap:active .g-flag {

    cursor: grab;

    border: 1px dashed #000;

    width: 100px;

    height: 100px;

}

​

.g-wrap:active {

    cursor: grab;

}