معرفی متحرک سازی یا انیمیشن در css3 css به شما این قابلیت را میدهد تا عنصرها بدون استفاده ...
معرفی متحرک سازی یا انیمیشن در CSS3 CSS به شما این قابلیت را میدهد تا عنصرها بدون استفاده از Flash و JavaScript را متحرک کنید. این قابلیت از مرورگرهای Internet Explorer 10, Firefox, Opera نیز پشتیبانی میکند. قانون keyframes@ و خصوصیت animation را پشتیبانی می کنند. اما مرورگر های کروم و Safari به پسوند -webkit- احتیاج دارند. توجه داشته باشید که مروگر  Internet Explorer 9 و نسخه های قدیمی تر ار آن این قابلیت را پشتیبانی نمیکنند شما متوانید با متحرک سازی یا انیمیشن در CSS3 طراحی وب سایت خود را جذاب تر کنید. انیمیشن در CSS3 چیست؟ انیمیشن یک افکتی میباشد که به شما اجازه میدهد یک عتصر به تدریج از یک Style به Style دیگر تغییر کنید. همچنین قادر هستید Style ها و زمان های مورد نظر خود را تعیین کنید. برای استفاده کردن از افکت های انیمیشن میبایست Keyframe هایی را برای انیمیشن تعریف کنید. تغییرات را میتوانید به طور درصد و یا با کلمه های کلیدی from و to معرفی کنید. ۰% اول انیمیشن و ۱۰۰% آخر آن است. قانون keyframes@ در CSS3 برای ساختن انیمیشن در CSS3 اول بایدقانون keyframes@ را متوجه شوید. هنگامی که یک استایل در Keyframes تعیین میکنید انیمیشن کم کم از Style جاری به Style جدید تغییر میکند. بعد از آنکه انیمیشن را در @keyframes تعریف کردید بااستفاده کردن از ویژگی Animation آن را به عنصری که میخواهید اتصال دهیدو در این مثالل یک انیمیشن با عنوان Example به مدت ۴ ثانیه به عنصر <div> متصل میباشد. رنگ پس زمینه نیز به ندریج از قرمز به زرد تغییر میکند : /* The animation code */ @keyframes example {     from {background-color: red;}     to {background-color: yellow;} } /* The element to apply the animation to */ div {     width: 100px;     height: 100px;     background-color: red;     animation-name: example;     animation-duration: 4s; }