انتخاب رنگ سبز انتخاب رنگ آبی انتخاب رنگ قرمز

انیمیشن و متحرک سازی اجزا با CSS

CSS Animation

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


CSS3
Animation



قانون @keyframes در CSS3

برای ایجاد انیمیشن در CSS3 ، شما باید قانون @keyframes در CSS3 را یاد بگیرید .
شما در داخل keyframes ها تعریف میکنید که در چه زمانی باید چه تغییراتی درون سی اس اس ها انجام شود مثلاً در 0% از زمان بکگراند آبی و در 100% زمان قرمز باشد .
پشتیبانی مرورگر ها
پشتیبانی مرورگر ها از CSS3 Border

اینترنت اکسپلورر از سی اس اس انیمیشن و @keyframe پشتیبانی نمی کند.
فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارند.
اپرا برای این ویژگی نیاز به پیشوند -o- دارد .
نمونه (بصورت from , to )
Internet ExplorerFirefoxChromeSafariOpera
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

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

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
در بالا myfirst نام انیمیشن شما است .
CSS3 animation

پس از آنکه حرکت مورد نظر را با @keyframes تعریف کردید نوبت آن است که آن را که نامش مثلاً myfist است ، به یک div متصل کنید .

برای انجام دادن آن شما باید دو کار انجام دهید :
  • نام انیمیشن را تعریف کنید مثلاً myfirst
  • مدت زمان انیمیشن
نمونه (اتصال انیمیشن با نام myfirst به یک div ، مدت زمان : 5 ثانیه)
Internet ExplorerFirefoxChromeSafariOpera
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
-o-animation: myfirst 5s; /* Opera */
}

نکته در صورتی که هیچ زمانی داده نشود هیچ افکتی رخ نخواهد داد چون زمان دیفالت 0 ثانیه است .
در CSS Animation چه خبر است ؟

انیمیشن افکتی است که نشان دهنده تغییر حالت یک المنت به حالت دیگر است .
شما هرچقدر که بخواهید می توانید حالت را تغییر دهید .
تغییرات را میتوانید به صورت درصد یا کلمه های کلیدی from و to بیان کنید .
0% ابتدای انیمیشن و 100% انتهای آن است .

نمونه (تغییرات چندگانه)
Internet ExplorerFirefoxChromeSafariOpera
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
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;}
}

@-o-keyframes myfirst /* Opera */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
نمونه (تغییرات چندگانه)
Internet ExplorerFirefoxChromeSafariOpera
@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;}
}

@-moz-keyframes myfirst /* Firefox */
{
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;}
}

@-o-keyframes myfirst /* Opera */
{
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;}
}
شرح دادن ویژگی های فوق

برای دیدن صفحه مخصوص هر یک از ویژگی های فوق روی نام آن ها کلیک کنید :


دو مثال دیگر :
نمونه (تغییرات چندگانه)
Internet ExplorerFirefoxChromeSafariOpera
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;
/* Firefox: */
-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;
/* 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;
/* Opera: */
-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;
}
نمونه (تغییرات چندگانه)
Internet ExplorerFirefoxChromeSafariOpera
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

وی بی ایران در Facebook

صفحه رسمی وی بی ایران در فیس بوک قصد دارد تا بهترین مطالب را به Stream شما ارسال کند . اگر میخواهید :
  • استایل های جدید
  • هک های جدید
  • مقاله های محبوب
  • خبر های جدید ویبولتین
  • و ..
برای شما ارسال شود ، هم اکنون پیج ما را لایک کنید .
برای ورود به صفحه رسمی وی بی ایران روی آیکن فیس بوک کلیک کنید .