アニメーションの使用方法

ドラッグ&ドロップ後のcssアニメーションを使用...

キーフレームを使用したアニメーションの方法

.box_slide_fwd {
    position: absolute; /* position absolute를 줘야 translateZ를 쓸 수 있음 */
}
.box_slide_fwd:hover {
    -webkit-animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-fwd-center 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-fwd-center { /* slide-fwd-center : 애니메이션의 이름 */
    0% {
        -webkit-transform: perspective(0) translateZ(0);
        transform: perspective(0) translateZ(0);
    }
    100% {
        -webkit-transform: perspective(500px) translateZ(20px);
        transform: perspective(500px) translateZ(20px); /* perspective를 줘야 translateZ를 쓸 수 있음 */
    }
}

@keyframes slide-fwd-center {
    0% {
        -webkit-transform: perspective(0) translateZ(0);
        transform: perspective(0) translateZ(0);
    }
    100% {
        -webkit-transform: perspective(500px) translateZ(20px);
        transform: perspective(500px) translateZ(20px);
    }
}

transformとtranslitionを使用した基本アニメーションの作成

transform : translate, scale, rotate... 一緒に使用することもできます

transition transition: property duration timing-function delay;

参考資料