ساختن افکت چشمک با CSS

سلام به همگی، امروز کدنویسی داریم ، ولی با سی اس اس. من یک مدتی دارم روی یک سایت کار میکنم و این سایت منو همبرگریه Navbar کنارش رو دارک کردم و خیلی مشکی تو مشکی شده بود و به جلوه نمیومد. میخواستم یک چیزی پایین این منو بذارم که قشنگ تر بشه و به جلوه بیاد. برای همین یک مربع گذاشتم که گوشه های گرد و حاشیه های نارنجیه و این پشت سر هم بزرگ و کوچکی میشه و یک انیمیشن داره که چشمک چشمک میزنه. امروز میخوایم این مربع رو پیاده سازی کنیم. این افکت کد کمی تو html لازم داره ولی باید چند تا از ویژگیهای مهم css رو بلد باشید. این هم از کد:

HTML:

<span class=&quotblink&quot></span>

CSS:

      	@keyframes bounce {
        		0% {
        			transform: scale(0.2);
        			opacity: 0;
        		}
        		50% {
        			transform: scale(1);
        			opacity: 1;
        		}
        		100% {
        			transform: scale(0.2);
        			opacity: 0;
        		}
        	}
.blink{
        display: block;
        background: white;
	color: black;
        font-size: 5.7rem;
        font-family: sans-serif;
        filter: blur(0.2);
        width: 350px;
        height: 350px;
        border-radius: 3rem;
        border: 10px solid orangered;
        margin-top: 7px;
        animation: bounce 2s ease-in 0s infinite;
}

پ.ن. : من وقتی سایتم تکمیل شد لینکش رو این پایین میذارم. ببخشید خروجی کد رو نذاشتم چون انیمیشن داره فیلم میشه اگه راهی هست برای گذاشتن فیلم پایین تو کامنتا بنویسید.