2019 September 20 - جمعه 29 شهرويور 1398
آموزش Css3 – قسمت نهم – Animations
کد خبر: ١٩٣٩ تاریخ انتشار: ١٧ بهمن ١٣٩١ - ١٩:١٩ تعداد بازدید: 1430
آموزش Css3 – قسمت نهم – Animations

سلام
امروز در مورد ساخت انیمیشن در سی اس اس ۳ می خواهم برای شما توضیح دهم. در سی اس اس ۳ ما می توانیم به راحتی اجزاء صفحه را حرکت دهیم آنها را بچرخانیم , کوچک و بزرگ کنیم یا تصاویر را تغییر دهیم.

سلام

امروز در مورد ساخت انیمیشن در سی اس اس ۳ می خواهم برای شما توضیح دهم. در سی اس اس ۳ ما می توانیم به راحتی اجزاء صفحه را حرکت دهیم آنها را بچرخانیم , کوچک و بزرگ کنیم یا تصاویر را تغییر دهیم.

@keyframes در سی اس اس ۳

برای ساخت انیمیشن توسط سی اس اس ۳ ما نیاز داریم که بفهمیم keyframes چیست و چطور عمل می کند.

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

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

IE از انیمیشن های سی اس اس ۳ پشتیبانی نمی کند.

Firefox با پیشوند -moz- پشتیبانی می کند.

Chrome و Safari با پیشوند -webkit-, پشتیبانی می کند.

Opera با پیشوند -o- پشتیبانی می کند.

مثال ۱ :

@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;}
}

در مثال بالا انیمیشن طوری تعریف شده که رنگ زمینه را از قرمز به زرد تبدیل کند.

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

پارامتر اول نام انیمیشن

پارامتر دوم مدت زمان اجرا انیمیشن

مثال ۲ :

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
-o-animation: myfirst 5s; /* Opera */
}

در مثال بالا انیمیشنی را که در مثال ۱ تعریف کردیم به تگ div و با مدت زمان ۵ ثانیه تخصیص داده ایم.

شیوه زمانبندی انیمیشن

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

به جای from و to ما می توانیم از % نیز استفاده کنیم. مقدار ۰% نشان دهنده شروع انیمیشن و مقدار ۱۰۰% نشان دهنده پایان انیمیشن خواهد بود.

مثال ۳ :

@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;}
}

در مثال بالا در زمان شروع انیمیشن رنگ زمینه قرمز است و بعد از گذشت ۲۵% از زمان انیمیشن رنگ زمینه زرد و در ۵۰% رنگ زمینه آبی و در انتها رنگ زمینه سبز خواهد شد.

مثال ۴ :

@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;}
}

در مثال بالا در زمان شروع جزء تعریف شده در موقعیت ۰ و ۰ یعنی گوشه سمت چپ بالای صفحه و با رنگ زمینه قرمز خواهد بود و در طول انیمیشن علاوه بر تغییر مکان جزء در صفحه وب رنگ زمینه آن نیز تغییر خواهد کرد.

مثال ۵ :

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;
}

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

موفق باشید



Share
* نام:
ایمیل:
* نظر:

آخرین مطالب


صفحه اصلی | تماس با ما | درباره ما | آرشیو | پیوندها | RSS
طراحی و تولید: مؤسسه احرار اندیشه