آموزش Transition در css
![آموزش Transition در css](https://topsite98.com/public/assets/images/article/CSS172CSS.png)
آموزش ویدئویی دستور Transition
دانلود رایگان فیلم و آموزش ویدئویی Transition در cssهمراه با چندین مثال
چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.
مشاهده یا دانلود فیلم بالاآموزش Transition در css بصورت کامل. دستور Transition از بخش های مختلفی تشکیل شده است که همه را با ذکر مثال توضیح خواهیم داد. کدها را می توانید در فایل html ذخیره کرده و تست نمایید تا نتیجه را ببینید.
در این بخش از آموزش css از تاپ سایت 98 به سراغ CSS Transitions میرویم.
دستور transition در css
دستور transition در css یکی از دستورات css میباشد که می تواند قالب سایت را بسیار زیبا کند و یکی از دستورات جذاب است.
با دستور transition می توانیم مدت زمان اجرای یک دستور css را مشخص کنیم برای فهم بهتر بیاییم چند مثال بزنیم.
مثال دستور transition در css
در این بخش مثال دستور transition در css را مشاهده می کنید.
در مثال زیر ابتدا یک باکس را ایجاد کرده ایم.
سپس با هاور روی باکس یا div سایز آن تغییر می کند.
در حالت عادی این کار سریع انجام می شود اما با اضافه شدن دستور یا متد transition این کار در مدت دو ثانیه انجام می شود که کار را بسیار زیبا می کند.
<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 و نیم ثانیه تغییر می کند.
<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 را بررسی کرده ایم.
<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 را خواهیم داشت و در مورد تاخیر بحث خواهیم کرد.
گاهی نیاز است که مدت مشخص مکثت یا تاخیر شود و سپس کدی اجرا شود.
اگر بدرستی این کار انجام شود کارهای زیبایی خلق می شود.
در مثال زیر هنگامی که با موس روی باکس قرار می گیریم پس از دو ثانیه تاخیر ، باکس شروع به بزرگ شدن می کند.
<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 را می بینید.
باکس همزمان با تغییر سایز دادن پرخش می کند.
<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 نیز مدت زمان اجرای افکت را مشخص می کند.
<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>
امیدواریم از این آموزش لذت برده باشید.
موفق باشید.
![دوره ارز دیجیتال تاپ سایت 98](https://topsite98.com/assets/images/tabligh1/a/banner-ad4.webp)
منبع: دبلیو تری اسکولز
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید