آموزش CSS3 (جلسه اول)

مقدمه :

برخی خواص CSS3 :

CSS3 خواصی دارد که کار طراحی وب سایت رو خیلی ساده می کند و خروجی کار خیلی تمیزتر در میاد. مثلا خواص border-radius برای گرد کردن گوشه های باکس‌ها باعث میشه تا دیگه نیازی به استفاده از عکس برای گوشه های گرد باکس‌ها و منوها نباشد. یا استفاده از شیب رنگ که طراحی سایت را بسار زیبا و آسان می کند. و استفاده از انیمیشن بدون نیاز به استفاده از کتابخانه های Jquey که باعث می شود سایت طراحی شده سبک تر و در عین حال زیبا باشد. و…

معرفی ویژگی animation در CSS3 :

تعریف و کاربرد :

این ویژگی ۶ مقدار دارد که به معرفی آن می پردازیم.

animation : نام انیمیشن زمان نحوه اجرای تابع تاخیر شمارش تکرار جهت;

animation: name duration timing-function delay iteration-count direction;

• name : ما برای این که یک انیمیشن ایجاد کنیم باید یک نام برای آن انتخاب کنیم بزارین این طوری بگم فکر کنید داخل C یا PHP می خواهید یک تابع بسازید سپس با استفاده از این اسمی که برای تابع تعریف کرده ایم آن تابع را صدا می کنیم.
• duration : مدت زمان اجرای تابع
• timing-function : نحوه نمایش انیمیش که این حالت ها را پشتیبانی می کند:

linear,ease,ease-in,ease-out,ease-in-out

• delay : تاخیر
• iteration-count : شمارش تکرار

نکته : اگر از مقدار infinite استفاده کنید انیمیشن شما برای همیشه تکرار می شود.

• direction : جهت

مثال :

برای مثال اول یک باکس ۱۰۰px در ۱۰۰px ایجاد می کنیم سپس یک انیمیشن با استفاده از CSS3 برای آن ایجاد می کنیم.

خوب حالا یک نام برای انیمیشن انتخاب می کنیم مثلاً boxmove سپس با استفاده از دستورات CSS3 می گوییم باکس ما را از سمت راست صفحه نمایش به سمت چپ صفحه نمایش هدایت کند.

۰۱ div
02 {
03 width:100px;
04 height:100px;
05 background:red;
06 position:relative;
07 animation:boxmove 5s linear;
08 -moz-animation:boxmove 5s infinite; /*Firefox*/
09 -webkit-animation:boxmove infinite; /*Safari and Chrome*/
10 }
۱۱ @keyframes boxmove
12 {
۱۳ from {right:0px;}
14 to {right:200px;}
15 }
۱۶ @-moz-keyframes boxmove /*Firefox*/
17 {
۱۸ from {right:0px;}
19 to {right:200px;}
20 }
۲۱ @-webkit-keyframes boxmove /*Safari and Chrome*/
22 {
۲۳ from {right:0px;}
24 to {right:200px;}
25 }

توضیحات خط ها :

در خط ۳و۴ اندازه باکس ۱۰۰ در ۱۰۰ تعیین شده در خط ۵ رنگ قرمز برای پس زمینه باکس تعیین شده در خط ۶ مقدار position را relative قرار دادیم که بتوانیم باکس مورد نظر را حرکت دهیم در خط ۷ یک نام به عنوان boxmove برای انیمیشن در نظر گرفتیم و مدت زمان اجرای آن را ۵ ثانیه در نظر گرفتیم و شمارش تکرار را توسط کد infinite نامحدود قرار دادیم در خط ۸ و ۹ برای انواع مرورگرها این کد نوشته شده است.

در خط ۱۱ انیمیشن خود را ایجاد می کنیم مثل این که یک تابع داریم ایجاد می کنیم که به باکس مورد نظر گفتیم از right 0 به right 200 تغییر مکان انجام بده.