انیمیشن چشم زدن با css

شاید در وب سایت های خبری و یا تبلیغاتی با چشمک زدن یک لینک ، چشک زدن یک عکس و یا متن رو به رو شده باشید که میتوانند بسیار برای شما جذاب باشند . حال این سوال برایتان پیش می آید که حتما کد نویسی پیچیده ای در پس آن میباشد حتی اگر یک برنامه نویس باشید اما در حال حاظر  css  با جدیدترین نسخه ی خود یعنی css3 این کار را به راحتی برای شما انجام میدهد .

کافیست در فایل استایل خود با استفاده از  keyframes  یک بازه ی مشخص برای اجرای انیمیشن خود در نظر بگیرید به طور مثال در زیر یک انیمیشن ساده برای تغییر رنگ یک متن در حالت چشمک زدن ایجاد میکنیم که بر روی کلاس مشخصی اعمال میشود :

@keyframes pulse {

    0% {

        background-color: #700F11;

        border-color: #700F11;

    }

    100% {

        background-color: #a24244;

        border-color: #a24244;

    }

}

.example {

    background-color: #700F11;

    animation: pulse 1s infinite;

}

موفق باشید .

نویسنده : مهندس سید امیرحسین میرمحمد