آموزش CSS3 آموزش transition در CSS3

0 دیدگاه 2,494 آموزش HTML5 و CSS3

خاصیت transition عامل اصلی در افکت های css3 هست شما بدون این خاصیت نمیتونید هیچ افکتی رو اجرا کنید.

آموزش CSS3 آموزش transition در CSS3 در وب سایت پاسخ وردپرس

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

آموزش CSS3 آموزش transition در CSS3 | پاسخ وردپرس |

قاعده دستوری transition

transition: property duration timing-function delay;

1	transition: property duration timing-function delay;

خاصیت transition خلاصه نویسی و بهینه نویسی خاصیت های زیر هست :

transition-property : با استفاده از این خاصیت میتونید تعیین کنید که انیمیشن روی کدوم خاصیت اختصاص داده شده به عنصر اعمال بشه ،
مثلا روی width عنصر اعمال بشه یا روی height عنصر یا color عنصر و … .
در صورتی که مقدار این خاصیت رو برابر با all قرار بدید تمامی خاصیت ها و مقادیر و استایل
یک عنصر رو تحت تاثیر انیمیشن قرار میده و انیمیشن رو روی تمامی خاصیت ها و مقادیر عنصر اجرا می کنه .

transition-duration : این خاصیت مدت زمان اجرای یک انیمیشن رو مشخص
می کنه که بر حسب ثانیه و میلی ثانیه مشخص میشه.

آموزش CSS3 آموزش transition در CSS3 | پاسخ وردپرس |

transition-timing-function : این خاصیت شامل مقادیر زیر میشه و سرعت اجرای افکت رو تعیین می کنه :

[checklist]

ease جلوه ی شروع آرام بعد سریع و در انتها آرام
linear جلوه ی با سرعت یکنواخت در شروع و پایان
ease-in جلوه ی شروع با سرعت آرام در ابتدا
ease-out جلوه ای با پایان آرام در انتها
ease-in-out جلوه ای با شروع و پایان آرام در ابتدا و انتها
cubic-bezier(n,n,n,n) جلوه ی خاص با ورود مقادیر دلخواه شما

[/checklist]

transition-delay : این خاصیت مکثی رو قبل از شروع افکت تعیین می کنه ، مثلا ۲ ثانیه میگذره و بعد افکت اجرا میشه.

در انتها با یک مثال این خاصیت رو بیشتر براتون توضیح میدم:

به کد زیر دقت کنید :

h1{width:100px; color:white;
 background-color:black;
 -webkit-transition: all 1s ease 0s;
 -moz-transition: all 1s ease 0s;
 transition: all 1s ease 0s;}

h1:hover{background-color:brown}

h1{width:100px; color:white;

background-color:black;

-webkit-transition: all 1s ease 0s;

-moz-transition: all 1s ease 0s;

transition: all 1s ease 0s;}

h1:hover{background-color:brown}

در این مثال یک عنصر h1 در نظر گرفتیم و به این عنصر رنگ قلم ،
رنگ پس زمینه و ۱۰۰ پیکسل عرض اختصاص دادیم .
همچنین تعریف کردیم که وقتی موس روی این عنصر قرار گرفت رنگ پس زمینه از مشکی به قهوه ای تغییر کنه .

آموزش CSS3 آموزش transition در CSS3 | پاسخ وردپرس |

در مثال بعدی چند تغییر در سایر ویژگی های المانهای صفحه میدهیم.از جمله color , padding , opacity , border تا با خاصیت transition بهتر آشنا شوید.

ابتدا یک فایل html ایجاد کنید و کدهای زیر را در آن قرار دهید:

<!DOCTYPE HTML>
<html>
<head>
<title>جلوه های transition در css3</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>

<p><a class="webmoom-transition webmoom-opacity" href="#">Opacity</a></p>
<p><a class="webmoom-transition webmoom-color" href="#">Color</a></p>
<p><a class="webmoom-transition webmoom-padding" href="#">Padding</a></p>
<p><a class="webmoom-transition webmoom-border" href="#">Border</a></p>
<p><a class="webmoom-transition webmoom-color webmoom-padding webmoom-border" href="#">Color - Padding - Border</a></p>

</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>جلوه های transition در css3</title>

</head>

<body>

<a class="webmoom-transition webmoom-opacity" href="#">Opacity</a>

<a class="webmoom-transition webmoom-color" href="#">Color</a>

<a class="webmoom-transition webmoom-padding" href="#">Padding</a>

<a class="webmoom-transition webmoom-border" href="#">Border</a>

<a class="webmoom-transition webmoom-color webmoom-padding webmoom-border" href="#">Color - Padding - Border</a>

</body>

</html>

در فایل html خود ۵ المان قرار دادیم که هر کدام دارای یک کلاس خاص میباشد که استایل این کلاسها را در فایل style.css مینویسیم.
یک فایل به نام style.css ایجاد کنید و کدهای زیر را در آن قرار دهید:

body{ 
        background:#fff;
        font-family:'Open Sans',sans-serif; 
        text-align:center;
        font-size: 14px;
        line-height: 22px;
    }
    a{
        padding: 10px 15px;
        background: #f2f2f2;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        -o-border-radius: 4px;
        text-decoration: none;
        color: #336699;
    }
    p{
        margin: 50px 0;
    }
.webmoom-transition{
    transition:All 1s ease;
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
}
 
 
.webmoom-opacity:hover{
    opacity: 0.3;
}
.webmoom-color:hover{
    color: #fff;
    background: #2184cd;
}
.webmoom-padding:hover{
    padding: 15px 20px;
}
.webmoom-border:hover{
    border: 2px solid #000;
}

body{

background:#fff;

font-family:'Open Sans',sans-serif;

text-align:center;

font-size: 14px;

line-height: 22px;

}

padding: 10px 15px;

background: #f2f2f2;

border-radius: 4px;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

-o-border-radius: 4px;

text-decoration: none;

color: #336699;

}

margin: 50px 0;

}

.webmoom-transition{

transition:All 1s ease;

-webkit-transition:All 1s ease;

-moz-transition:All 1s ease;

-o-transition:All 1s ease;

}

.webmoom-opacity:hover{

opacity: 0.3;

}

.webmoom-color:hover{

color: #fff;

background: #2184cd;

}

.webmoom-padding:hover{

padding: 15px 20px;

}

.webmoom-border:hover{

border: 2px solid #000;

}

اگر دقت کنید در هر کلاس دستور transition به تعداد ۴ بار به شکل زیر تکرار شده :

خاصیت transition به صورت پیشفرض به همین شکل نوشته میشود ولی از آنجایی که این خاصیت باید در مرورگرهای دیگر نیز قابلیت اجرایی داشته باشد نوع های اخصاصی آن برای مرورگرهای دیگر نیز در کدنویسی css شما نیز باید درج شود.
[checklist]

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

[/checklist]

این جلسه از آموزش به پایان رسید موفق باشید

میانگین رتبه 1/5 تعداد رای : 1

آموزش CSS3 آموزش transition در CSS3