animation چیست؟

Animation یکی از قابلیت‌های css3 می‌باشد که امکان طراحی جذاب و محرک عناصر صفحه را برای کاربران وب فراهم کرده است.در تعریف animation از کلمه کلیدی @keyframe استفاده می‌شود.در واقع با این پیشوند به مرورگر می‌فهمانیم که در حال تعریف animation هستیم. به مثال زیر توجه نمایید:

مثال :

@keyframe bounce

اینترنت اکسپلورر هنوز از دستور @keyframe    یا خاصیت انیمیشن پشتیبانی نمی‌کند بنابراین برای نمایش صحیح افکت ها; نیاز به نوشتن پیشوند -ms- می‌باشد و سافاری به پیشوند -webkit- و اپرا به پیشوند -o- نیاز دارد.

مثال :

-ms-@keyframe bounce

زمانی که انیمیشن با دستور @keyframe  ایجاد شد ،می بایست از آن در یک تگ استفاده کنیم ، در غیر این صورت انیمیشن مؤثر نخواهد بود.
انیمیشن را حداقل با مشخص کردن این دو خاصیت انیمیشن ، اجرا نمایید:

• مشخص کردن نام انیمیشن
• مشخص کردن مدت انیمیشن

مثال:

animation: myfirst 5s

نکته : شما باید نام و مدت زمان انیمیشن را تعریف کنید. اگر مدت زمان تعریف نشود انیمیشن اجرا نخواهد شد. چون مقدار پیش فرض 0 است.

یک انیمیشن حرکتی است که باعث می شود یک عنصر به تدریج از یک استایل به استایلی دیگر تغییر یابد. شما می‌توانید عناصر را به هر استایلی به دفعات دلخواه تغییر دهید.

در زمان تعریف keyframes ما می‌توانیم از from برای تعریف شرایط شروع انیمیشن و از to برای شرایط پایان انیمیشن استفاده کنیم، وقتی از from و to استفاده می‌کنیم وابسته به مدت زمان تعیین شده، مرورگر به صورت خودکار زمان را طوری تنظیم می‌کند که از حالت        from  تا حالت to در مدت زمان تعریف شده اجرا شود.
بجای from و to ما می‌توانیم از % نیز استفاده کنیم. مقدار 0% شروع انیمیشن و مقدار 100% پایان انیمشین را تعیین می‌کند.در هنگام استفاده از % ما می‌توانیم مراحل انمیشین را به 100 قسمت تقسیم کنیم، و در هر قسمت کدهای مورد نظرمان را قرار دهیم
 0% آغاز انیمیشن است و 100% زمانی است که انیمیشن کامل می‎شود.

مثال :

@keyframes slideInUp {
    0% {
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        visibility: visible;
    }

    100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}