انیمیشن های css3 امکان ایجاد پویانمایی بدون استفاده از جاوا اسکریپت را برای اکثر عناصر HTML فراهم می کند.

 

پشتیبانی مرورگر 

اعداد داخل جدول نشان دهنده اولین نسخه از مرورگر است که این صفت را بطور کامل پشتیبانی می کند. اعدادی که به همراه -webkit- ، -moz- یا -o- هستند نشان دهنده اولین نسخه از مرورگر است که با prefix کار می کند.

صفت	کروم	اکسپلورر	فایرفاکس	سافاری	اپرا
@keyframes	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-
animation	43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

 

 

 

 

 

 

پویانمایی (انیمیشین) در css3 چیست؟

انیمیشن به عنصر اجازه می دهد تا به آرامی از یک استایل به استایل دیگر تغییر یابد. می توان هر تعداد از صفات css را دفعات مکرر تغییر داد.
برای استفاده از انیمیشن css3 ابتدا باید تعدادی keyframe برای انیمیشن تعریف کنید. keyframe هر استایلی که یک عنصر در یک زمان مشخص خواهد داشت را در خود نگه می دارد.

 

دستور ketframes@ 

زمانی که استایل های css را داخل keyframes@ تعریف می کنید، انیمیشن مورد نظر استایل عنصر را به آرامی به دفعات مختلف به استایل جدید تعیین شده تغییر می دهد. برای اینکه یک انیمیشن کار کند باید آن را با عنصر پیوند بدهید. 
در مثال زیر انیمیشن "example" را با عنصر <div> پیوند می دهیم. این انیمیشن برای 4 ثانیه دوام خواهد داشت و رنگ زمینه عنصر مورد نظر را به آرامی از قرمز به زرد تغییر خواهد داد.

مثال : 

 

نکته ! اگر صفت animation-duration مشخص نشود انیمیشن تاثیری نخواهد داشت ، چون مقدار پیش فرض صفر است.
در مثال بالا با استفاده از کلمات کلیدی "from" و  "to" مشخص کرده ایم که استایل چه زمانی شروع به تغییر کند. (که از مقدار 0% برای شروع - و 100% برای کامل شدن استفاده می شود)
همچنین استفاده از درصد نیز امکان پذیر است.با استفاده از درصد می توان به هر تعداد  دلخواهی استایل را تغییر داد.
در مثال زیر رنگ زمینه عنصر <div> زمانی که انیمیشن 25% ، 50% و 100% کامل شود ، تغییر می کند.

مثال : 

 

در مثال زیر هم رنگ زمینه و هم موقعیت عنصر <div> زمانی که انیمیشن 25% ، 50% و 100% کامل شود ، تغییر می کند.

مثال : 

 

تاخیر در انیمیشن

صفت animation-delay تاخیری برای شروع انیمیشن تعریف می کند.در مثال زیر 2 ثانیه تاخیر قبل از شروع انیمیشن تعریف شده است.

مثال : 

 

تنظیم تعداد دفعات اجرای انیمیشن

صفت animation-interation-count تعداد دفعاتی که انیمیشن باید اجرا شود را مشخص می کند. در مثال زیر انیمیشن قبل از اینکه متوقف شود 3 بار اجرا می شود.

مثال : 

 

در مثال زیر از مقدار "infinite" برای اجرای دائمی انیمیشن استفاده کرده ایم.

مثال : 

 

اجرای انیمیشن در جهت مخالف یا چرخه های متناوب

صفت animation-direction امکان اجرای انیمیشن در جهت مخالف یا چرخه های متناوب را فراهم می کند. مثال زیر انیمیشن را در  جهت مخالف اجرا می کند.

مثال : 

 

مثال زیر از مقدار "alternate" استفاده می کند تا انیمیشن را ابتدا به سمت جلو ، بعد به سمت عقب و دوباره به سمت جلو اجرا کند.

مثال : 

 

تعریف منحنی سرعت انیمیشن

صفت animation-timing-function منحنی سرعت انیمیشن را مشخص می کند. این صفت می تواند مقادیر زیر را داشته باشد.

ease - شروع کند ، امتداد سریع و پایان کند(پیش فرض)
linear - سرعت برابر در آغاز و پایان
ease-in - شروع کند
ease-out - پایان کند
ease-in-out - شروع و پایان کند
cubic-bezier(n,n,n,n) - تعیین مقادیر دلخواه

مثال زیر تعدادی از منحنی های سرعت مختلف را که می توان استفاده کرد ، نمایش می دهد.

مثال : 

 

صفت کوتاه شده animation

مثال زیر از 6 صفت انیمیشن استفاده می کند.

مثال : 

 

همان مثال بالا را می توان با استفاده از صفت کوتاه شده animation اجرا کرد : 

مثال : 

 

صفت	توضیحات
@keyframes	تعریف کدهای انیمیشن
animation	یک صفت کوتاه شده برای تمام صفات انیمیشن
animation-delay	تعریف یک تاخیر در شروع انیمیشن
animation-direction	تعیین اجرای انیمیشن در جهت مخالف یا چرخه متناوب
animation-duration	تعریف طول مدت اجرای کامل یک چرخه از انیمیشن
animation-fill-mode	تعریف استایلی برای عنصر برای زمانی که انیمیشن اجرا نمی شود (اجرا کامل شده یا تاخیر دارد)
animation-iteration-count	تعریف تعداد دفعات اجرای انیمیشن
animation-name	تعریف نام انیمیشن های keyframes@
animation-play-state	مشخص کردن اجرا یا توقف انیمیشن
animation-timing-function	تعریف منحنی سرعت انیمیشن