سرخط خبرها

آموزش animation در css3

انیمیشن در css

 

در این جلسه از اموزش css در رابطه با ساخت انیمشن در css3 صحبت خواهیم کرد. در css3 ما به راحتی می توانیم اجزاء صفحه را حرکت دهیم، آنها را بچرخانیم، کوچک و بزرگ کنیم و در کل هر انیمشنی را بدون استفاده از هیچ زبان دیگری بسازیم.

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

جالب توجه است که شما می توانید این انمیشن ها و تصاویر متحرک را بدون نیاز به هیچ برنامه گرافیکی جانبی و فقط با نوشتن کدهای ساده در CSS 3 ایجاد نمایید .

 

دستور keyframes@

برای ساخت انیمیشن با animation نیاز به دانستن فریم کلیدی یا keyframe دارید

برای ایجاد انیمیشن با CSS3 باید دستور keyframes@ را یاد بگیرید.  فریم کلیدی جایی است که در ان انیمیشن تولید می شود 

دستور keyframes@ جای است که انیمیشن باید ایجاد شود. با ایجاد یک استایل شیت در داخل دستور keyframes@ ، انیمیشن از استایل فعلی به استایل جدید تغییر خواهد یافت. درون فریم کلیدی ، می توان مقدار ویژگیهای css را از حالتی به حالت دیگر تغییر داد. 

برای مثال تعیین می کنید که رنگ پس زمینه یک عنصر یعنی خاصیت background از مقدار yellow به مقدار green تغییر کند . یا اینکه اندازه عرض عنصر یا همان خاصیت width از مقدار ۱۰۰px به مقدار ۲۰۰px تغییر نماید .

بنابراین تغییراتی که می خواهید در عنصر مورد نظرتان صورت پذیرد را در ساختار  keyframes @ تعیین می کنید . در زمان اجرای کد، عنصر از حالت اول به صورت تدریجی به حالت دوم تغییر وضعیت پیدا می کند . این تغییر وضعیت باعث ایجاد یک انمیشن و افکت تصویری می شود .

در حقیقت در داخل keyframes ما مجموعه کدهایی را که برای ساخت انیمشین نیاز است می نویسیم و در آن حالت اولیه و حالتی که باید یک جزء از صفحه به آن تبدیل شوید را می نویسیم.

 

فرم کلی ساختار  keyframes@ :

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

@ keyframes نام ساختار
    {
        from { خاصیت مورد نظر و مقدار اول آن ;}
        to { خاصیت مورد نظر و مقدار دوم آن ;}
    }

 

نکته مهم : این ساختار در سطح برنامه به وسیله نام آن شناسایی و فراخوانی می شود .

 

زمانی که انیمیشن در دستور keyframes@ ایجاد شد ، آن را به یک انتخابگر متصل کنید ، وگرنه انیمیشن مؤثر نخواهد بود .
انیمیشن را حداقل با مشخص کردن این دو خاصیت انیمیشن ، به انتخابگر متصل کنید :

  • مشخص کردن نام انیمیشن
  • مشخص کردن مدت زمان اجرای انیمیشن

 باید برای هر مرورگر استایل جدا بنویسیم  و در ضمن با عبارت keyframes@ و استفاده از نام انیمیشن ، وظیفه انیمیشن را مشخص می کنیم

 

شیوه زمان بندی انیمشین from و to :

در زمان تعریف keyframes ما میتوانیم از from برای تعریف شرایط شروع انیمیشن و از to برای شرایط پایان انیمیشن استفاده کنیم، وقتی از from و to استفاده می کنیم وابسته به مدت زمان تعیین شده، مرورگر به صورت خودکار زمان را طوری تنظیم میکند که از حالت from تا به حالت to در مدت زمان تعریف شده اجرا شود.
بجای from و to ما میتوانیم از % نیز استفاده کنیم. مقدار ۰% شروع انیمیشن و مقدار ۱۰۰% پایان انیمشین را تعیین میکند.
در هنگام استفاده از % ما می توانیم مراحل انمیشین را به ۱۰۰ قسمت تقسیم کنیم، و در هر قسمت کدهای مورد نظرمان را قرار دهیم

 

@keyframes anim3 {
۰% {
// some code
}
 
۱% {
// some code
}
 
۲% {
// some code
}
…..
 
۱۰۰% {
// some code
}
}
 

——————————————-

@keyframes anim3 {

۰% {background: red;}
۲۵% {background: green;}
۵۰% {background: black;}
۷۵% {background: yellow;}
۱۰۰% {background: brown;}
}

مثال

این ساختار باعث می شود رنگ پس زمینه عنصر مربوط به آن از رنگ زرد به سبز تغییر نماید :

 

@keyframes MyFrame
    {
        from { background: yellow ; }
        to { background: green ; }
    }

——————————————-

@keyframes myfirst
{
from {
background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst 
{
from {
background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst
{
from {
background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst
{
from {
background: red;}
to {background: yellow;}
}

——————————————-

@keyframes anim1 {
from{background-color: black;}
to {background-color: red;}
}

@-webkit-keyframes anim1 {
from{background-color: black;}
to {background-color: red;}
}

@-moz-keyframes anim1 {
from{background-color: black;}
to {background-color: red;}
}

@-o-keyframes anim1 {
from{background-color: black;}
to {background-color: red;}
}

@-ms-keyframes anim1 {
from{background-color: black;}
to {background-color: red;}
}

یک ساخنار تعیین کرده ایم که موقعیت قرار گیری و اندازه عرض عنصر راا ز مقدار اولیه به یک مقدار دوم تغییر می دهد . در این ساختار کد لازم برای سازگاری با انواع مرورگرها قرار داده شده است

 

@keyframes MyFrame
    {
        from { width : 100px ; left : 0px ; top : 0px ; }
        to { width : 200px ; left : 100px ; top : 100px ; }
    }

@-moz-keyframes MyFrame
    {
        from { width : 100px ; left : 0px ; top : 0px ; }
        to { width : 200px ; left : 100px ; top : 100px ; }
    }

@-webkit-keyframes MyFrame
    {
        from { width : 100px ; left : 0px ; top : 0px ; }
        to { width : 200px ; left : 100px ; top : 100px ; }
    }

 

انیمیشن های CSS3 چیست؟

یک انیمیشن جلوه ای است که باعث می شود یک عنصر به تدریج از یک استایل به استایلی دیگر تغییر یابد. شما می توانید عناصر را به هر استایلی به دفعات دلخواه تغییر دهید.
زمانی که تغییر بر اساس درصد باشد ، کلمات کلیدی “from” و “to” را از ۰% تا ۱۰۰% مشخص کنید.
۰% آغاز انیمیشن است و ۱۰۰% زمانی است که انیمیشن کامل می شود.
برای پشتیبانی راحت و بهتر مرورگر ، هردو انتخابگر ۰% و ۱۰۰% را تعریف کنید.

 

 فرم کلی ساختار animation :

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

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

animation: anim3  ۴s linear ۲s infinite;

نکته مهم : خاصیت animation مخفف و ساده شده ۶ خاصیت زیر است  :

  1. animation-name
  2. animation-duration
  3. animation-timing-function
  4. animation-delay
  5. animation-iteration-count
  6. animation-direction

 

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

خاصیت animation-name :

خاصیت animation-name ، نام انمیشن ( keyfarmes @ ) را تعیین می کند . از این نام برای دسترسی و فراخوانی انیمیشن در سطح برنامه استفاده می شود .

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

animation-name: keyframename | none ;

keyframename : این پارامتر نام مورد نظر برای انیمیشن را تعیین می کند .

none : این مقدار باعث می شود تا هیچ انیمیشنی اجرا نشود . ( معمولا برای زمانی کاربرد دارد که می خواهید جلوی اجرای یک انمیشن که از یک فایل خارجی CSS می آید ، را بگیرید ) .
این مقدار در صورتی که نامی تعیین نشود ، مقدار پیش فرض است .

خاصیت animation-duration :

خاصیت animation-duration ، مدت زمان مورد نظر را برای اجرای کامل یک بار انیمیشن را بر حسب میلی ثانیه ( ms ) یا ثانیه ( s ) تعیین می کند .
برای مثال فرض کنید می خواهید چرخش یک عنصر به دور خود در ۲ ثانیه صورت بگیرد .

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

animation-duration: time ;

time : این خاصیت ، مدت زمان مورد نظر را برای اجرای کامل یک بار انیمیشن را بر حسب میلی ثانیه ( ms ) یا ثانیه ( s ) تعیین می کند .
مقدار پیش فرض خاصیت time صفر بوده و به این معنا است که انمیشن اجرا نمی شود .
بنابراین همواره آن را مقدار دهی کنید .

در مثال زیر یک انمیشن را با نام myfirst و برای سازگاری با انواع مرورگرها ایجاد کرده ایم . مدت زمان اجرای این انمیشن  ۵  ثانیه تعیین شده است :

 

div
{

animation: myfirst 5s;
-moz-animation: myfirst 5s; 
-webkit-animation: myfirst 5s;
-o-animation: myfirst 5s;
}

در مثال زیر یک انمیشن را با نام mymove و برای سازگاری با انواع مرورگرها ایجاد کرده ایم . مدت زمان اجرای این انمیشن  ۲  ثانیه تعیین شده است :

< html >;
  < head >
    < style >
       div
{
width:100px;
height:100px;
background:red;
position:relative;

animation:mymove infinite;
animation-duration:2s;

-moz-animation:mymove infinite;
-moz-animation-duration:2s;

-webkit-animation:mymove infinite;
-webkit-animation-duration:2s;
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove
{
from {top:0px;}
to {top:200px;}
{
from {top:0px;}
to {top:200px;}
}
< /style >
  </head>
<body>
    < div >
Developer Studio Network
< /div >

</body>
</html>

 

خاصیت animation-timing-function :

خاصیت animation-timing-function ، نحوه و سرعت اجرای انیمیشن را در طی فرآیند آن تعیین می کند .
از این خاصیت می توان برای دادن یک جلوه تصویری به انیمیشن استفاده کرد . برای مثال انیمیشن در هنگام اجرا ، آهسته شروع شده و سپس سرعتش تا پایان آن افزایش یابد .

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

 animation-timing-function: value ;

پارامتر value در این خاصیت می تواند یکی از مقادیر زیر را داشته باشد :

linear : در این حالت سرعت اجرای انیمیشن در تمام طول فرآیند آن یکسان است . 
ease :در این حالت انیمیشن با سرعت کم آغاز شده ، در میانه فرآیند سرعتش زیاد شده و سپس با سرعت کم پایان می یابد .
این مقدار پیش فرض برای پارامتر value است . 
ease-in : انیمیشن در ابتدا با سرعت کم شروع شده و سپس سرعتش زیاد می شود . 
ease-out :انیمیشن در ابتدا با سرعت زیاد شروع شده و سپس سرعتش در انتها کم می شود . 
ease-in-out : انیمیشن در ابتدا و انتها دارای سرعت کم است .

در مثال زیر یک انمیشن را با نام mymove و برای سازگاری با انواع مرورگرها ایجاد کرده ایم . مدت زمان اجرای این انمیشن  ۱۰ ثانیه و حالت اجرای آن  ease  تعیین شده است :

< html >;
  < head >
    < style >
       div
{
width:100px;
height:100px;
background:red;
position:relative;

animation:mymove infinite;
animation-duration:10s;
animation-timing-function: ease;

-moz-animation:mymove infinite;
-moz-animation-duration:10s;
-moz-animation-timing-function:ease;

-webkit-animation:mymove infinite;
-webkit-animation-duration:10s;
-webkit-animation-timing-function:ease;
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
< /style >
  </head>
<body>
    < div >
Developer Studio Network
< /div >

</body>
</html>

خاصیت animation-delay :

خاصیت animation-delay ، تعیین می کند که انیمیشن مورد نظر پس از چند میلی ثانیه ( ms ) یا ثانیه ( s ) تاخیر ، اجرا شود .
برای مثال تمایل دارید ، انیمیشن  مورد نظر با  ۲ ثانیه تاخیر پس از لود شدن صفحه اجرا شود .
نکته : حتی مقادیر منفی نیز قابل قبول و تعیین است . مثلا اگر ۲- تعیین می کنید ، انیمیشن بلافاصله پس از لود شدن صفحه شروع می شود .
اما در هنگام شروع ۲ ثانیه نیز از آن گذشته است .

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

animation-delay: time ;

خاصیت animation-iteration-count :

خاصیت animation-iteration-count ، تعیین می کند که انیمیشن مورد نظر چند بار اجرا شود .
مقدار پیش فرض یک است ، انیمیشن فقط یکبار اجرا می شود . اما می توان مقدار آن را افزایش داد . 

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

animation-iteration-count : value  |  infinite ;

مقادیر مختلف خاصیت animation-iteration-count   :

value : یک مقدار عددی است که تعیین می کند انیمیشن جند بار اجرا شود .
مقدار پیش فرض این خاصیت یک بوده و به این معنا است که انمیشن یکبار اجرا می شود .

infinite : تعیین می کند که انیمیشن به صورت مداوم و بی نهایت اجرا شود .

در مثال زیر یک انمیشن را با نام mymove و برای سازگاری با انواع مرورگرها ایجاد کرده ایم . مدت زمان اجرای این انمیشن  ۳ ثانیه و تعداد دفعات نمایش آن ۲ بار تعیین شده است :

< html >
  < head >
    < style >
       div
{
width:100px;
height:100px;
background:red;
position:relative;

animation:mymove;
animation-duration:3s;
animation-iteration-count: 2;

-moz-animation:mymove;
-moz-animation-duration:3s;
-moz-animation-iteration-count:2;

-webkit-animation:mymove;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count:2 ;
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
< /style >
  </head>
<body>
    < div >
Developer Studio Network
< /div >

</body>
</html>

در مثال زیر یک انمیشن را با نام mymove و برای سازگاری با انواع مرورگرها ایجاد کرده ایم . مدت زمان اجرای این انمیشن  ۳ ثانیه و تعداد دفعات نمایش آن بی نهایت تعیین شده است :

 

 

< html >
  < head >
    < style >
       div
{
width:100px;
height:100px;
background:red;
position:relative;

animation:mymove;
animation-duration:3s;
animation-iteration-count: infinite;

-moz-animation:mymove;
-moz-animation-duration:3s;
-moz-animation-iteration-count:infinite;

-webkit-animation:mymove;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count:infinite;
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-moz-keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
< /style >
  </head>
<body>
    < div >
Developer Studio Network
< /div >

</body>
</html>

خاصیت توضیحات CSS
@keyframes انیمیشن را مشخص می کند ۳
animation یک خاصیت مختصر شده برای تمام خصوصیات انیمیشن بجز خصوصیت animation-play-state ۳
animation-name نام انیمیشن را مشخص می کند ۳
animation-duration مشخص می کند که یک انیمیشن چند ثانیه یا میلی ثانیه طولمیکشد تا کامل شود. پیش فرض ۰ است ۳
animation-timing-function چگونگی نمایش انیمیشن در طول اجرا را مشخص می کند. پیش فرض “ease” است ۳
animation-delay زمان شروع انیمیشن را تعریف می کند.پیش فرض ۰ است.(مشخص می کند که چقدر از نمایش اولیه انیمشین تا شروع اجرای آن تاخیر داشته باشد) ۳
animation-iteration-count تعداد دفعات نمایش انیمیشن را مشخص می کند . پیض فرض ۱ است ۳
animation-direction مشخص می کند که انیمیشن به صورت معکوس نیز اجرا شود یا نه.پیش فرض “normal” است ۳
animation-play-state مشخص می کند که آیا انیمیشن اجرا شود یا متوقف باشد . پیش فرض “running” است ۳

 

پشتیبانی مرورگرها از animation:

برای اجرای انیمیشن در مرورگرفایر فاکس باید از پیشوند -moz- استفاده کرد
برای اجرای انیمیشن در مرورگرسافاری و کروم باید از پیشوند-webkit- استفاده کرد
برای اجرای انیمیشن در مرورگر اپرا باید از پیشوند -o- استفاده کرد

برای اجرای انیمیشن در مرورگر  اکسپلور از پیشوند -ms- استفاده کرد

 

مثال :

می خواهیم انیمیشنی بنام myfirst که در مدت ۵ ثانیه انجام می شود برای تگ دایو ایجاد کنیم

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;
-webkit-animation: myfirst 5s; 
-o-animation: myfirst 5s; 
}

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

 

animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;

-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;

-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;

-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}

نمونه : نمونه زیر مانند نمونه بالاست ، اما با استفاده از خاصیت انیمیشن خلاصه شده myfirst با تنظیم تمام خصوصیات انیمیشن

 

div
{
animation: myfirst 5s linear 2s infinite alternate;

-moz-animation: myfirst 5s linear 2s infinite alternate;

-webkit-animation: myfirst 5s linear 2s infinite alternate;

-o-animation: myfirst 5s linear 2s infinite alternate;
}

چند مثال از کاربرد خاصیت animation :

در مثال های زیر ابتدا چند ساختار keyframes @ را تعیین کرده و آنها را به وسیله خاصیت animation به عنصر مورد نظرمان متصل کرده ایم . این کدها باعث ساخت تصاویر متحرک با عناصر شده است :

مثال ۱ : در مثال اول یک ساخنار تعیین کرده ایم که پس زمینه یک عنصر را  در مدت ۳ ثانیه  و فقط برای ۱ بار از رنگ قرمز به رنگ زرد تغییر می دهد . در این ساختار کد لازم برای سازگاری با انواع مرورگرها قرار داده شده است :

< html >;
  < head >
    < style >
     @keyframes chColor
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes chColor
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes chColor
{
from {background: red;}
to {background: yellow;}
}

      div
{
animation: chColor 3s;
-moz-animation: chColor 3s;
-webkit-animation: chColor 3s ;
}

< /style >

  </head>
<body>
    < div >
Developer Studio Network
< /div >

</body>
</html>

QR Code For: آموزش animation در css3

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.