متحرک سازی CSS3  امکان متحرک سازی عناصر HTML  را بدون استفاده از JavaScript یا فلش را می دهد!
  • 1395/3/18 6/7/2016 4:41:11 PM 6/7/2016 4:41:11 PM
  • 0
  • 396

متحرک سازی CSS3  امکان متحرک سازی عناصر HTML  را بدون استفاده از JavaScript یا فلش را می دهد!


پشتیانی مرورگر تبدیل های سه بعدی

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

 

خصوصیت

IE

Chrome

Firefox

Safari

Opera

@keyframes

10.0

4.0 -

Webkit-

16.0

5.0 –

Moz-

4.0  -

Webkit-

15.0

Webkit-

12.1

12.0 –o-

animation

10.0

4.0 -

Webkit-

16.0

5.0 –

Moz-

4.0 -

Webkit-

15.0

Webkit-

12.1

12.0 –o-

 


متحرک سازی های CSS3  چه هستند؟

یک انیمیشن این امکان را فراهم می کند که یک عنصر به طور تدریجی از یک سبک به سبک دیگه تغییر کند. شما می توانید هر تعداد خصوصیت CSS   را هر  چند بار که می خواهید تغییر دهید. برای استفاده از متحرک سازی CSS3  ، شما باید ابتدا  تعدادی keyframes  برای انیمیشن مشخص کنید. Keyframes سبک هایی که عنصر در زمان های مشخص به خود خواهد گرفت  را نگه میدارد.

 قانون  @keyframes:

وقتی شما سبک های CSS  داخل قانون @keyframes تعیین می کنید،  انمیشن به طور تدریجی در زمان های خاص از سبک فعلی به سبک جدید تغییر می کند.

برای این که یک انیمیشن کار کند، شما باید انیمیشن را به یک عنصر متصل کنید.

مثال زیر انیمیشن “example”  به عنصر <div> متصل می کند. انیمیشن 4 ثانیه طول می کشد، و آن به تدریج رنگ پس زمینه ی عنصر <div>  را از قرمز به زرد تغییر می دهد:


مثال

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width100px;
    height100px;
    background-color: red;
    animation-nameexample;
    animation-duration4s;
}

یادداشت: اگر خصوصیت animation-duration تعیین نشود، انیمیشن کار نخواهد کرد، زیرا مقدار پیش فرض  0 است.

در مثال بالا ما مشخص کرده ایم که چه زمانی  سبک با استفاده از کلید واژه های “from”  و “to”  ( که نشان دهنده ی 0% ( شروع) و 100% (تکمیل) )  تغییر کند.

همچنین امکان پذیر  است که از درصد استفاده کنید، با استفاده از درصد، تغییرات سبکی که دوست دارید را اضافه کنید.

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


مثال

/* The animation code */
@keyframes example {
    0%   {background-colorred;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-colorgreen;}
}

/* The element to apply the animation to */
div {
    width100px;
    height100px;
    background-colorred;
    animation-name: example;
    animation-duration: 4s;
}

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


مثال

/* The animation code */
@keyframes example {
    0%   { background-colorredleft:0px;  top:0px;}
    25%  { background-coloryellowleft:200pxtop:0px;}
    50%  { background-colorblueleft:200px; top:200px;}
    75%  { background-colorgreenleft:0px; top:200px;}
    100% {background-colorredleft:0pxtop:0px;}
}

/* The element to apply the animation to */
div {
    width100px;
    height100px;
    positionrelative;
    background-colorred;
    animation-nameexample;
    animation-duration4s;
}


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

خصوصیت animation-delay تاخیر را برای شروع یک انیمیشن تعیین می کند.


مثال

div {
    width100px;
    height100px;
    positionrelative;
    background-colorred;
    animation-nameexample;
    animation-duration4s;
    animation-delay2s;
}


تعیین کنید چندبار یک انیمیشن باید اجرا شود

خصوصیت animation-iteration-count تعداد زمانی که یک انیمیشن باید اجرا شود را مشخص می کند.

مثال زیر انیمیشن را سه بار  اجرا می کند:


مثال

div {
    width100px;
    height100px;
    positionrelative;
    background-colorred;
    animation-nameexample;
    animation-duration4s;
    animation-iteration-count3;
}

مثال زیر از مقدار “infinite” استفاده می کند که انیمیشن برای همیشه احرا شود:


مثال

div {
    width100px;
    height100px;
    positionrelative;
    background-colorred;
    animation-nameexample;
    animation-duration4s;
    animation-iteration-countinfinite;
}


اجرای انیمیشن در جهت معکوس یا چرخه جایگزین

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

مثال زیر انیمیشن در جهت معکوس اجرا می کند:


مثال

div {
    width100px;
    height100px;
    positionrelative;
    background-colorred;
    animation-nameexample;
    animation-duration4s;
    animation-iteration-count3;
    animation-directionreverse;
}

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


مثال

div {
    width100px;
    height100px;
    positionrelative;
    background-colorred;
    animation-nameexample;
    animation-duration4s;
    animation-iteration-count3;
    animation-directionalternate;
}

 


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

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

  • ease  - یک انیمیشن را با شروع آهسته، سپس سریع ، و سپس با با پایان آهسته را مشخص می کند ( این مقدار پیش فرض است)
  • Linear – یک انیمیشن را با سرعت ثابت از شروع تا پایان را مشخص می کند
  • Ease-in – یک انیمیشن با شروع آهسته را مشخص می کند
  • Ease-out- یک انیمیشن را با پایان آهسته مشخص می کند
  • Ease-in-out – یک انیمیشن را را با شروع و پایان آهسته مشخص می کند
  • cubic-bezier(n,n,n,n)  - اجازه میدهد  شما مقادیر دلخواه خودتان را در تابع cubic-bezier تعریف کنید.

 

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


مثال

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-functionease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-functionease-out;}
#div5 {animation-timing-function: ease-in-out;}


خصوصیت مختصرنویسی انیمیشن

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


مثال

div {
    animation-nameexample;
    animation-duration5s;
    animation-timing-functionlinear;
    animation-delay2s;
    animation-iteration-countinfinite;
    animation-directionalternate;
}

 

افکت انیمیشن بالا با استفاده خصوصیت مختصرنویسی انیمیشن می تواند به صورت زیر می تواند بدست آید:


مثال

div {
    animationexample 5s linear 2s infinite alternate;
}


خصوصیات انیمیشن CSS3

لیست قوانین @keyframes و همه خصوصیات انیمیشن در جدول زیر آورده شده است:

 

شرح

خصوصیت

کد انیمیشن را مشخص می کند

@keyframes

یک مختصرنویسی برای مقداردهی همه خصوصیات انیمیشن است ( به جز animation-play-state  و  animation-fill-mode (

animation

تاخیر  برای شروع یک انیمیشن را مشخص می کند

animation-delay

مشخص می کند که که یک انیمیشن چطور باید در جهت معکوس یا چرخه های جایگزین اجرا شود

animation-direction

مشخص می کند که چند ثانیه یا میلی ثانیه یک انیمیشن میگیرد تا یک چرخه کامل شود

animation-duration

سبک یک عنصر را وقتی که انیمیشن اجرا نمی شود را مشخص می کند ( وقتی که آن پایان یافته، و وقتی که آن تاخیر دارد )

animation-fill-mode

مشخص می کند که یک انیمیشن چند بار باید اجرا شود

animation-iteration-count

نام   @keyframes animation  را تعیین می کند

animation-name

در حال اجرابودن یا موقف بودن انیمیشن را مشخص می کند

animation-play-state

منحنی سرعت انیمیشن را مشخص می کند

animation-timing-function

 

محمد انصاری

من به عنوان طراح و برنامه نویس در شرکت توسن در حوزه ی بانکداری فعالیت می کنم. بیشتر زمانم رو به مطالعه پیرامون طراحی نرم افزار اختصاص میدم. همچنین علاقه ی زیادی به فعالیت های ورزشی دارم و زمان کافی به ورزش اختصاص می دهم.

نظرات 0
برای ارسال دیدگاه وارد حساب کاربری خود شوید.

ورود به حساب کاربری ایجاد حساب کاربری
محمد انصاری
متحرک سازی CSS3
زیگماوب