آموزش Transition در css

هدایت عباسی آموزش CSS

آموزش ویدئویی دستور Transition

دانلود رایگان فیلم و آموزش ویدئویی Transition در cssهمراه با چندین مثال

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

آموزش Transition در css بصورت کامل. دستور Transition از بخش های مختلفی تشکیل شده است که همه را با ذکر مثال توضیح خواهیم داد. کدها را می توانید در فایل html ذخیره کرده و تست نمایید تا نتیجه را ببینید.

در این بخش از آموزش css از تاپ سایت 98 به سراغ CSS Transitions میرویم.

دستور transition در css

دستور transition در css یکی از دستورات css میباشد که می تواند قالب سایت را بسیار زیبا کند و یکی از دستورات جذاب است.

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

مثال دستور transition در css

در این بخش مثال دستور transition در css را مشاهده می کنید.

در مثال زیر ابتدا یک باکس را ایجاد کرده ایم.

سپس با هاور روی باکس یا div سایز آن تغییر می کند.

در حالت عادی این کار سریع انجام می شود اما با اضافه شدن دستور یا متد transition این کار در مدت دو ثانیه انجام می شود که کار را بسیار زیبا می کند.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: lightgray;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>transition</p>
<div>
<p>topsite98</p>
</div>
</body>
</html>

تغییر چندین ویژگی با transition

در مثال زیر تغییر چندین ویژگی با transition را مشاهده میکنید.

در این مثال ما یک باکس را ایجاد کرده ایم و سپس با هاور روی باکس یا div عرض و ارتفاع آن تغییر می کند.

اما عرض آن در مدت 2 ثانیه و ارتفاع آن در مدت 3 و نیم ثانیه تغییر می کند.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: orangered;
transition: width 2s , height 3.5s;
}
div:hover {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>transition</p>
<div>
<p>topsite98</p>
</div>
</body>
</html>

مشخص کردن سرعت اجرا در transition

حال به سراغ مشخص کردن سرعت اجرا در transition یا transition-timing-function می رویم.

در متد transition حالت های مختلفی برای سرعت و نحوه اجرا وجود دارد که بررسی خواهیم کرد.

ease افکت بصورت آهسته شروع می شود و حرکت تند و سپس آهسته می شود که حالت پیش فرض است.

Linear سرعت افکت از ابتدا تا انتها یکسان است یعنی بصورت آرام حرکت می کند تا به انتها برسد.

ease-in سرعت افکت به صورت آهسته شروع می شود.

ease-out انتهای سرعت افکت transition آهسته می باشد.

ease-in-out ابتدا و انتهای سرعت افکت آهسته است.

cubic-bezier اجازه می دهد سرعت را خودتان تعیین کنید.

برای فهم بهتر چندین مثال خواهیم زد.

در کد زیر دو حالت transition-timing-function را بررسی کرده ایم.

<!DOCTYPE html>
<html>
<head>
<style>
#d1{
width: 100px;
height: 100px;
background: orangered;
transition: width 3s;
transition-timing-function: ease-in-out;
}
#d2{
width: 100px;
height: 100px;
background: orangered;
transition: width 3s;
transition-timing-function: ease-out;
}
#d1:hover , #d2:hover {
width: 400px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>transition</p>
<div id="d1">
<p>ease-in-out</p>
</div>
<div id="d2">
<p>ease-out</p>
</div>
</body>
</html>

آموزش transition-delay

در این قسمت آموزش transition-delay را خواهیم داشت و در مورد تاخیر بحث خواهیم کرد.

گاهی نیاز است که مدت مشخص مکثت یا تاخیر شود و سپس کدی اجرا شود.

اگر بدرستی این کار انجام شود کارهای زیبایی خلق می شود.

در مثال زیر هنگامی که با موس روی باکس قرار می گیریم پس از دو ثانیه تاخیر ، باکس شروع به بزرگ شدن می کند.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: orangered;
transition: width 3s;
transition-delay: 2s;
}
div:hover {
width: 200px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>transition</p>
<div>
<p>topsite98</p>
</div>
</body>
</html>

مثال Transition + Transformation

در زیر مثال Transition + Transformation را می بینید.

باکس همزمان با تغییر سایز دادن پرخش می کند.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 300px;
height: 300px;
-webkit-transform: rotate(180deg); /* Safari */
transform: rotate(180deg);
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>transition</p>
<div>
<p>Transition + Transformation</p>
</div>
</body>
</html>

دستورات transition-property و transition-duration

در این بخش به آموزش دستورات transition-property و transition-duration می پردازیم.

در قسمت های بالا با این دستورات آشنا شده اید اما در این قسمت می خواهیم توضیح بیشتری بدهیم.

در مثال زیر می بینیم که با متد transition-property نوع عنصر را مشخص می کند.

متد transition-duration نیز مدت زمان اجرای افکت را مشخص می کند.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 5s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>TopSite98.com</h1>
<p>transition</p>
<div>
<p>transition-property</p>
<p>transition-duration</p>
</div>
</body>
</html>

امیدواریم از این آموزش لذت برده باشید.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید