انتقال یا گذر در CSS3
Transition یا انتقال در CSS3
در CSS3، در صورت تغییر ویژگی های یک عنصر، می توانیم این تغییر را بصورت تدریجی مشاهده نماییم. (بدون استفاده از Flash یا JavaScript)
پشتیبانی مرورگرها از خصوصیت Transition
| خاصیت | پشتیبانی مرورگرها | ||||
|---|---|---|---|---|---|
| transition |  |
 |
 |
 |
 |
مرورگرهای Internet Explorer 10, Firefox, Chrome, Opera خصوصیت transition را پشتیبانی می کنند.
مرورگر Safari به پیشوند -webkit- نیاز دارد.
توجه: مرورگر Internet Explorer 9 و نسخه های قبلی آن، این امکان را پشتیبانی نمی کند.
توجه: مرورگر Chrome 25 و نسخه های قبلی آن، به پیشوند -webkit- نیاز دارد.
Transition چگونه کار می کند؟
transition در CSS3، افکتی است که اجازه می دهد یک عنصر از یک Style به Styleی دیگر بتدریج تغییر نماید.
برای انجام آن، حداقل باید دو چیز را مشخص نمایید:
-
خصوصیت CSSی که می خواهید انتقال در ازای تغییر آن انجام شود.
-
مدت زمان انجام انتقال
مثال (انتقال یا گذر در CSS3)
انتقال روی خصوصیت width، با مدت زمان 2 ثانیه:
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
توجه: در صورتی که هیچ زمانی تنظیم نشود، افکتی رخ نخواهد داد چون زمان پیش فرض 0 ثانیه است.
افکت زمانی رخ می دهد که مقدار خصوصیت مشخص شده در transition تغییر کند. به عنوان نمونه این تغییر می تواند زمانی رخ دهد که موس روی عنصر، قرار می گیرد:
مثال (انتقال یا گذر در CSS3)
مشخص کردن hover: برای عنصر <div>:
{
width:300px;
}
توجه: زمانی که موس از روی عنصر خارج می شود، width عنصر بتدریج به مقدار اولیه خود تغییر می کند.
تنظیم همزمان چند تغییر در Transition
با جدا کردن خصوصیت ها و زمان با کاما می توانید همزمان چند تغییر را تعریف کنید:
مثال (انتقال یا گذر در CSS3)
اضافه کردن افکت روی width، height و transform:
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
خصوصیت های انتقال در CSS3
در جدول زیر، لیست تمام خصوصیت های انتقال آورده شده است:
| خصوصیت | توضیحات | CSS |
|---|---|---|
| transition | تمام خصوصیت های انتقال را بصورت مختصر مشخص می کند. | 3 |
| transition-property | نام خصوصیت CSSی است که اگر بنحوی تغییر کند، انتقال یا transition صورت می گیرد. | 3 |
| transition-duration | مدت زمان انتقال را مشخص می کند. مقدار پیشفرض 0 است. | 3 |
| transition-timing-function | در طول یک انتقال، نحوه انجام آن را مشخص می کند. مقدار پیشفرض "ease" است. | 3 |
| transition-delay | بعد از چه مدت، انتقال شروع شود. مقدار پیشفرض 0 است. | 3 |
در دو مثال زیر، از تمام خصوصیت های انتقال استفاده شده است:
مثال (انتقال یا گذر در CSS3)
استفاده از تمام خصوصیت های انتقال در یک مثال:
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
مثال (انتقال یا گذر در CSS3)
تنظیم تمام خصوصیت های مثال قبل، با استفاده از خصوصیت مختصر transition:
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 23521
دیدگاه‌ها
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E N" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet " href="/style.css " type="text/css" />
<meta http-equiv="Con tent-Type" content="text/h tml; charset=iso-885 9-1" />
<title>Untitled Document</title>
</head>
<body>
<div id="right-menu">
<img id="right-menu- icon" src="/../eshop/t ak.png" /><div id="right-menu- icon-title"> Digital Dreams</div>
</div>
<div id="main-content">main-content</div>
</body>
</html>
دوست عزیز یه مقدار کدت رو تغییر دادم. ارتفاع دیو راست کم شد ولی چیزی که می‌خواستی اکی شده.
برای اینکه ارتفاع دیو راست کل صفحه رو بگیره،باید دو سه تا خاصیت CSS بهش بدی. البته داده بودی، من حذفش کردم. اگه میذاشتم، درست شدن دیو بغلیش داستان دار می‌شد.
سعی کردم بدون جاوااسکریپت درستش کنم. با جاوااسکریپت میشه چیز دلخواه رو به دست آورد، ولی با CSS فکر نمی‌کنم. (مطمئن نیستم، شاید باشه!!!)
کد کامل در زیر ببینید:
<!DOCTYPE html PUBLIC "-//W3C//D TD XHTML 1.0 Transitional//E N" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="style sheet " href="styl e.css " type="text /css" />
<meta http-equiv=&quo t;Con tent-Type" content="t ext/h tml; charset=iso-885 9-1" />
<title>Untitled Document</title>
<style>
body{overflow-x:hidden;padding:0;margin:0;direction:rtl;}
#right-menu {
background:#333333;
width:64px;
height:90%;
margin-left:10px;
float:right;
transition:width 0.3s;
}
#right-menu:hover {
width:150px;
}
#right-menu-icon{
height:50px;
width:50px;
border:solid 0px #999999;
left:5px;
top:10px;
position:absolute;
float:right;
}
#right-menu-icon-title{
width:auto;
height:50px;
border:solid 1px #CCCCCC;
left:64px;
position:absolute;
left:64px;
}
#main-content{
background:#CCCCCC;
color:#000000;
padding:5px;
line-height:15px;
border:solid 1px #999999;
display:block;
width:650px;
height:100%;
position:relative;
float:right;
padding: 10px;
}
</style>
</head>
<body>
<div id="right-menu">
<img id="right- menu- icon" src="../es hop/t ak.png" /><div id="right- menu- icon-title" ;> Digital Dreams</div>
</div>
<div id="main-content">main-content</div>
</body>
</html>
سلام و خسته نباشید .
قبل از اینکه سوالمو بپرسم لازمه بخاطر زحماتتون ازتون تشکر کنم . اجرتون با امام حسین .
من میخوام وقتی موس رو روی یه div میبرم transition روی تمام div های داخل div اولیه اجرا بشه . آیا یه همچین چیزی ممکنه ؟
با سلام.
برای اینکه به div مادر یه کلاس یا ID خاص بدید. بعدش توسط علامت < میتونید تمامی divهایی که داخل این div خاص هستند رو انتخاب و توسط سلکتور hover:: بهش اکشن بدید.
<style>
#MyDIV > div::hover{
transition : ...;
}
</style>
<div id="MyDIV">
<div>content 1</div>
<div>content 2</div>
<div>content 3</div>
<div>content 4</div>
<div>content 5</div>
</div>
ممنون آقای صلاحی ،
مثل همیشه دقیق و سریع . البته من تو پرسیدن سوال دوم یکم عجله کردم . شما جوابو توی پاسخ همون سوال اولم داده بودید فقط کمی طول کشید متوجه بشم . با راهنمایی شما و یکم مطالعه بیشتر مطالب سایت مشکلم حل شد .
خواهش میکنم.
موفق باشید.
ممنون از پاسخ سریعتون ولی من نتونستم منظورمو خوب بیان کنم .
کد:
body{overflow-x:hidden;padding-right:64px;direction:rtl;}
#right-menu {
background:#333333;
width:64px;
height:100%;
position:absolute;
float:right;
right:0px;
top:0px;
transition:width 0.3s;
}
#right-menu:hover {
width:150px;
}
#right-menu-icon{
height:50px;
width:50px;
border:solid 0px #999999;
left:5px;
top:10px;
position:absolute;
float:right;
}
#right-menu-icon-title{
width:auto;
height:50px;
border:solid 1px #CCCCCC;
left:64px;
position:absolute;
left:64px;
}
#main-content{
background:#CCCCCC;
color:#000000;
padding:5px;
line-height:15px;
border:solid 1px #999999;
display:block;
width:650px;
height:100%;
position:relative;
float:right;
}
منظور من اینه که میخوام دیو main-content هم همراه با دیو right-menu تحت تاثیر اکشنی که میدم قرار بگیره و به اندازه width:main-menu به right:main-cont etnt اضافه بشه .
خواهش میکنم.
کد html. رو هم امکانش هست قرار بدید؟؟ (فقط علامت > و < رو در نظر داشته باشید.)
سلام
من یک شی درست کردم که 50% به سمت چپ حرکت می کند
من می خواهم وقتی به انتهای مقصد رسید یعنی 50% دیگر از ابتدا شروع نشود یعنی همانجا بماند
باید چی کار کنم
با سلام.
در صورت امکان کد خودتون رو قرار بدید.
با سلام و خداقوت
توی مثال که نوشتید linear چه کار می کنه؟ دیگه چه چیزی هایی هستند؟
ممنون
سلام
نحوه ی آنالیز سرعت افکت از ابتدا تا انتها با خصوصیت transition-timi ng-function تعیین می شود. این خصوصیت می توانید مقادیر زیر را بپذیرد:
ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier()|initial|inherit
linear به این معنی است که سرعت انجام افکت transition به صورت خطی باشد که این یعنی از ابتدا تا انتهای افکت، سرعت ثابت باشد.
دمتون گرم کارتون درسته :lol: :lol: :lol: :lol: :lol: