css 애니메이션 - 서랍 효과 주기

서랍 효과를 줄 div 추가하기

<div class="drawer-container">
	<div class="drawer-text-wrapper">
		<span>서랍 효과ㅏㅏㅏㅏㅏㅏㅏㅏ</span>
	</div>
</div>

css 적용하기

@keyframes fadeInOut {
	0% {
		opacity: 0;
        transform: translateX(30px);
        width: 196px;
    }
    20% {
        opacity: 1;
        transform: translateX(0);
        width: 246px;
    }
    80% {
        opacity: 1;
        transform: translateX(0);
        width: 246px;
    }
    100% {
        opacity: 0;
        transform: translateX(30px);
        width: 196px;
    }
}
.drawer-container {
	bottom: 105px;
    right: 46px;
    position: fixed;
    z-index: 1;
    opacity: 0;
    animation: fadeInOut 6s forwards infinite;
    width: 196px;
}
.drawer-text-wrapper {
	background-color: #3f659b;
    padding: 10px 68px 10px 12px;
    border-radius: 50px;
    display: flex;
    white-space: nowrap;
}
.drawer-text-wrapper span{
    font-size: 1rem;
    font-family: "NotoSansKRMedium";
    color: #ffffff;
}

• 서랍이 열렸다가 닫히는 느낌을 주기위해 0, 20, 80, 100 으로 나눠서 효과를 줌.