*{box-sizing:border-box;position:relative}body{flex-direction:column;justify-content:center;align-items:center;display:flex}.lock{background-color:#333;border-radius:5px;width:55px;height:45px;animation:1s 1.5s dip}.lock:before,.lock:after{content:"";border-left:5px solid #333;width:15px;height:20px;position:absolute;left:calc(50% - 12.5px)}.lock:before{border:5px solid #333;border-bottom-color:#0000;border-radius:15px 15px 0 0;height:30px;animation:2s lock,2s spin;top:-30px}.lock:after{border-right:5px solid #0000;animation:2s spin;top:-10px}@keyframes lock{0%{top:-45px}65%{top:-45px}to{top:-30px}}@keyframes spin{0%{left:calc(50% - 30px);transform:scaleX(-1)}65%{left:calc(50% - 12.5px);transform:scaleX(1)}}@keyframes dip{0%{transform:translateY(0)}50%{transform:translateY(10px)}to{transform:translateY(0)}}