خلاصه و چکیده از طراحی ریسپانسیو و انیمشن ها

برای طراحی به صورت ریسپانسیو همیشه سعی کنید در داخل پروژه امان یک فایل به نام style-grid-system درست کنیم

و تمام استایل های مربوط به ریسپانسیو امون و همچنین utlity هایی که می نویسیم رو در آن قرارد دهیم

( برای نوشتن utlity استایل هایی که زیاد استفاده میکنیم رو در آن قراردهیم تا از نوشتن مجدد آن ها جلوگیری شود

همچنین در هنگام ماژول کردن فایل ها اون فایل های import را بیایم و با _ نام گزاری شون کنیم و بعد به فایل اصلی css امون اضافه کنیم )

برای طراحی ریسپانسیو ما از  media qury syntax زیر به دو صورت استفاده میکنیم 

1- استفاده از یک فاصله بینی مثلا طبق مثال زیر فاصله هایی بین 500 تا 700 پیکسل 

@Media screen and ( min-witdth : 500px ) and ( max-witdth : 700px ) {
.heaing {
padding : 20 px
}
}

2- استفاده از یک فاصله مشخص 

@Media screen and ( witdth : 500px ) {
.heaing {
padding : 20 px
}
}

برای نام گزاری گرید هامون ما باید از چندین perifix با نام های xs  و s  md و  l  و  xl  بیایم و استفاده بکنیم و متناسب با اون ها اندازه هامون رو مشخص کنیم همچنین در ابتدای همه آن ها از col استفاده  میکنیم و برای هرکدوم هم باید حدودا 12 ستون در نظر بگیریم که هرکدوم حدودا 8.33 درصد فضا رو اشغال میکنن همچنین برای وسط چین کردن المان ها در هنگام گیرد بندی با پسوند offset برای حاشیه ها بعد از اون ها میایم و استفاده میکنیم که در هنگام استفاده فقط باید حواسمون باشد که تعداد ستون هامون زوج باشد

همچنین در فایل های ریسپانسیو امان برای شناوری سازی از ها میتوانیم از استایل فلوت زیر بیایم و استفاده بکنیم 

[ class ^= " col " ] {

  float : right ; 
  paddingleft:15px
  paddingright:15px

}

همچنین برای ریسپانسیو کردن تصاویر هم از استایل زیر استفاده میکنیم 

img-responsive {

width : 100%;
height : auto;
display ; block

}

و سعی شود در طراحی کردن برای گرفتن عرض های صد در صد و استایل های container و استفاده از row ها رو هم داشته باشیم 

.container-fluid {

  width : 100%

}

.container {
  clear: both;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;

}

.row::after {
  content: "";
  clear: both;
  display: table;
}

انیمشن ها 

transform : برای جابه جایی عناصر میایم و ازش استفاده میکنیم که مقادیر مختلفی میگیرد

    ( translate (x , y جابه جایی عنصر در محور ها
    ( rotate( deg  برای چرخش عنصر 
    ( scale( number  برای بزرگ نمایی عنصر هستش
    ( skew (x,y  درست کردن یک انحراف و یک کجی 
    matrix  ترکیب قبلی ها 

transform-origin :  این ویژگی یک خورده نا مفهوم هستش ( بنده زیاد خوب نتوستم درکش کنم )  اما طبق مثال استاد موقعی استفاده میکنیم که از ویژگی قبلی مقدار چرخش رو اومدیم استفاده کردیم حال می خواهیم بر اساس اون مقدار بیاد و در راستای های محور طول و عرضش شروع کنه به حرکت کردن

1- prespective  

2- style - transform : preserve-3d   
برای سه بعدی ساختن یک انیمشن میایم و از این ویژگی استفاده میکنیم به این صورت که حتما باید بیایم و اولی رو والدش بدهیم و مقدار عددی رو براش در نظر بگیریم که معمولا 200 هستش ( دلبخواه ) حال برای فرزند باید بیایم و  استایل دومی رو قرار دهیم 
 

backface-visibility : تعین میکند که موقعی که اومدیم از چرخش 180 درجه استفاده کردیم  در فضای سه بعدی پشت عنصر قابل مشاهده باشد و دیده شود
 

transition :  transition-property  transition-duration transition-function-timing  

از این ویژگی در هاور کردن ها زیاد استفاده میکنیم یک مدل از استفاده کردن از انیمشن ها هستش 

transition-property  کدوم پراپرتی قراره و این انیمشن روش تاثیر بزاره که یا نام اون رو قرار میدهیم یا هم کلمه all همه

 transition-duration میزان مدت زمان اجرای انیمشن 

transition-function-timing » افکت هایی برای اجرا کردن انیمشن که معمول ترینشون linear  هستش

transition-delay » میزان تاخیر در زمان اجرا

پراپرتی   animation : name duration timing-function delay iteration-count direction fill-mode

animation-name : نام انیمشن انتخابی مون 

animation-fill-mode : برای حفظ آخرین وضعیت  که مقادیر فووروارد  و بکوارد میگیرد

animation-itreation-count : تعداد دفعات تکرار برای انیمشن امون هستش که مقدار عددی یا بینهایت  میگیرد

animation-play-state :   برای ایجاد دکمه پاز  و پلی و اجرا شدن 

@keyfram  برای  درست کردن انیمشن هامون باید بیایم و از این ویژگی استفاده بکنیم 
به این صورت که بعد از این کلمه رزروی باید بیایم و نامی رو براش قرار دهیم که نام انیمشن امون هست و بعد با 
استفاده از درصد ها از صفر تا 100 درصد و یا با استفاده از 
from {}  to {}  استایل هایی برای ساخت انیمشن هامون درست کنیم