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

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

Wiki

با استفاده از CSS3 می توانید عناصر را متحرک نمایید. این امکان می تواند جایگزین خوبی برای تصاویر متحرک، Flash و JavaScript باشد.


قانون keyframes@ در CSS3

برای ایجاد انیمیشن در CSS3، ابتدا باید قانون keyframes@ را یاد بگیرید.

keyframes@ جایی است که در آن انیمیشن ایجاد می شود. داخل keyframes@ یک Style مشخص می کنیم و انیمیشن بتدریج از Style جاری به Style جدید تغییر می کند.


پشتیبانی مرورگرها از قانون keyframes@ و خاصیت animation

Wiki

خاصیتپشتیبانی مرورگرها
@keyframes
animation

مرورگرهای Internet Explorer 10, Firefox, Opera قانون keyframes@ و خصوصیت animation را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پیشوند -webkit- نیاز دارند.

توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.

مثال (متحرک سازی در CSS3)

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

خاصیت animation در CSS3

Wiki

پس از اینکه، انیمیشن را در قانون keyframes@ تعریف کردید، با استفاده از خاصیت animation آنرا به عنصر مورد نظرتان متصل کنید.

برای اتصال انیمیشن به یک عنصر، باید حداقل دو مقدار زیر را در خصوصیت animation تنظیم نمایید:

  • نام انیمیشن
  • مدت زمان انیمیشن

مثال (متحرک سازی در CSS3)

اتصال انیمیشن "myfirst" به عنصر <div>، با مدت زمان 5 ثانیه:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}
خودتان امتحان کنید »

توجه: شما باید نام و مدت زمان انیمیشن را مشخص نمایید. در صورتی که هیچ زمانی داده نشود، انیمیشن اجرا نخواهد شد، چون زمان پیشفرض 0 ثانیه است.


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

Wiki

انیمیشن، افکتی است که اجازه می دهد، یک عنصر بتدریج از یک Style به Styleی دیگر تغییر کند.

شما می توانید Styleها و زمان های دلخواهتان را مشخص نمایید.

تغییرات را می توانید به صورت درصد یا با کلمه های کلیدی from و to بیان کنید.

0% ابتدای انیمیشن و 100% انتهای آن است.

برای پشتیبانی بهتر مرورگرها، همیشه 0% و 100% را مشخص نمایید.

مثال (متحرک سازی در CSS3)

کل زمان اجرای انیمیشن 5 ثانیه است، زمانی که انیمیشن به 25% اجرای خود رسید، رنگ پس زمینه به زرد تغییر می کند و در 50% آبی و در پایان سبر خواهد شد:

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
خودتان امتحان کنید »

مثال (متحرک سازی در CSS3)

تغییر رنگ پس زمینه و مکان:

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
خودتان امتحان کنید »

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

Wiki

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

خاصیتتوضیحاتCSS
@keyframesمتحرک سازی را مشخص می کند.3
animationتمام خصوصیت های متحرک سازی بجز خصوصیت animation-play-state را بصورت مختصر مشخص می کند.3
animation-nameنام انیمیشن که در قانون keyframes@ ذکر شده است را مشخص می کند.3
animation-durationزمان اجرای انیمیشن به ثانیه یا میلی ثانیه، مقدار پیشفرض 0 است.3
animation-timing-functionنحوه پردازش انیمیشن در طول یک سیکل را توضیح می دهد. مقدار پیشفرض "ease" است.3
animation-delayزمان شروع انیمیشن را مشخص می کند. مقدار پیشفرض 0 است.3
animation-iteration-countتعداد دفعاتی که انیمیشن اجرا می شود را مشخص می کند. مقدار پیشفرض 1 است. (مقدار infinite انیمیشن را تا بینهایت تکرار خواهد کرد)3
animation-directionاگر تعداد تکرار انیمیشن بیش از 1 بار باشد، این خصوصیت سیکل تناوب انیمیشن را مشخص می کند. (مقدار alternate انیمیشن را به صورت عکس تکرار می کند)3
animation-play-stateتوقف یا اجرای انیمیشن را مشخص می کند. مقدار پیشفرض "running" است.3

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

مثال (متحرک سازی در CSS3)

اجرای یک انیمیشن با نام "myfirst" که تمام خصوصیت های انیمیشن برای آن تنظیم شده است:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-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;
}
خودتان امتحان کنید »

مثال (متحرک سازی در CSS3)

اجرای انیمیشن مثال قبل، که تمام تنظیمات قبلی در خصوصیت animation تنظیم شده است:

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}
خودتان امتحان کنید »

آموزش صوتی CSS3

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تبلیغات اینترنتی
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان