0
عضویت / ورود
جمعه، 7 دی 1403 ( جهش تولید با مشارکت مردم )

مرجع CSS

 
parisaexp
parisaexp
کاربر نقره ای
تاریخ عضویت : مهر 1392 
تعداد پست ها : 888
محل سکونت : اصفهان

پاسخ به:مرجع CSS
دوشنبه 10 آذر 1393  11:18 PM

مرجع خصوصیت های CSS

قانون @keyframes

مثال

عنصر <div> بتدریج 200 پیکسل به سمت پایین حرکت می کند:

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

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
خودتان امتحان کنید »

در انتهای این بیاموز، مثال های بیشتری را خواهید دید

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

Internet Explorer Firefox Opera Google Chrome Safari

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

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

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

تعریف و کاربرد

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

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

در طول اجرای انیمیشن می توانید چندین بار Style را تغییر دهید.

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

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

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

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

نحوه استفاده

@keyframes animationname {keyframes-selector {css-styles;}}
مقدار توضیحات
animationname الزامی است. نام انیمیشن را مشخص می کند.
keyframes-selector الزامی است. مشخص می کند در چه زمانی از اجرای انیمیشن، Style اعمال شود.
مقادیر مجاز:

0-100%
from (0%)
to (100%)

توجه: در یک انیمیشن می توانید چندین keyframes-selectors داشته باشید.
css-styles الزامی است. می تواند شامل یک یا چند خصوصیت CSS باشد.
مثالs

مثال - خودتان امتحان کنید

مثال

مشخص کردن چندین keyframes-selector در یک انیمیشن:

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

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

مثال

تغییر چند Style به صورت همزمان:

@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
خودتان امتحان کنید »

مثال

چندین keyframes-selector و Style مختلف در یک انیمیشن:

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

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

بیاموزهای مرتبط

CSS3 Animation (بیاموز CSS3)

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.

تشکرات از این پست
دسترسی سریع به انجمن ها