مدل رنگ HSL
مدل رنگ HSL
12/12/1395
پلاگین ها در HTML
پلاگین ها در HTML
13/12/1395
نمایش همه

متحرک سازی یا انیمیشن در CSS3

متحرک سازی یا انیمیشن در CSS3

معرفی متحرک سازی یا انیمیشن در CSS3

CSS به شما این قابلیت را میدهد تا عنصرها بدون استفاده از Flash و JavaScript را متحرک کنید. این قابلیت از مرورگرهای Internet Explorer 10, Firefox, Opera نیز پشتیبانی میکند. قانون keyframes@ و خصوصیت animation را پشتیبانی می کنند. اما مرورگر های کروم و Safari به پسوند -webkit- احتیاج دارند. توجه داشته باشید که مروگر  Internet Explorer 9 و نسخه های قدیمی تر ار آن این قابلیت را پشتیبانی نمیکنند شما متوانید با متحرک سازی یا انیمیشن در CSS3 طراحی وب سایت خود را جذاب تر کنید.

متحرک سازی یا انیمیشن در CSS3

انیمیشن در CSS3 چیست؟

انیمیشن یک افکتی میباشد که به شما اجازه میدهد یک عتصر به تدریج از یک Style به Style دیگر تغییر کنید. همچنین قادر هستید Style ها و زمان های مورد نظر خود را تعیین کنید. برای استفاده کردن از افکت های انیمیشن میبایست Keyframe هایی را برای انیمیشن تعریف کنید. تغییرات را میتوانید به طور درصد و یا با کلمه های کلیدی from و to معرفی کنید. ۰% اول انیمیشن و ۱۰۰% آخر آن است.

متحرک سازی یا انیمیشن در CSS3

قانون 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;
}