ویژگی transition-delay مدت زمان مکث یا درنگ قبل از اعمال transition بر روی یک عنصر را تعیین می کند.
به این معنا که اگر ویژگی از ویژگی های یک عنصر دارای transition باشد, زمانی که آن ویژگی بخواهد تغییر کند اگر ما برای آن transition-delay تعیین کنیم, آن ویژگی به همان مدت زمان مکث دارد و سپس شروع به تغییر می کند.
واحد زمانی این ویژگی می تواند ثانیه و یا میلی ثانیه باشد و مقدار پیشفرض آن 0 است به این معنا که ویژگی فورا شروع به تغییر می کند و مکث نخواهد داشت.
فرض کنید می خواهید پس زمینه عنصری را زمانی که در حالت hover: قرار می گیرد از زرد به قرمز تبدیل کنید و این تبدیل با transition صورت بگیرد اما می خواهید اعمال این تغییر پس از گذر 1 ثانیه شروع شود کافی است به صورت زیر عمل کنید:
.element {
background-color: yellow;
transition-property: background-color;
transition-duration: .6s;
transition-timing-function: linear;
transition-delay: 1s;
}
.element:hover {
background-color: red;
}
اگر بخواهیم واضح تر بیان کنیم خواهیم گفت: در مثال بالا ویژگی transition-delay به ویژگی background-color در زمان hover شدن عنصر می گوید “یک ثانیه صبر کن سپس شروع به تغییر کن”.
مقدار این ویژگی منفی هم می تواند باشد که در این صورت تغییر بدون درنگ شروع می شود اما یک پرش در زمان انجام (transition-duration) ترنزیشن به وجود خواهد آمد و آن پرش برابر با مدت زمان منفی است که به ویژگی درنگ داده شده است. به بیان دیگر اگر مدت زمان تغییر چهار ثانیه باشد و مدت زمان درنگ منفی یک ثانیه باشد, آنگاه تغییر از ثانیه دومش نمایش داده می شود و یک پرش یک ثانیه ای خواهیم داشت.
.element {
background-color: yellow;
transition-property: background-color;
transition-duration: 4s;
transition-timing-function: linear;
transition-delay: -1s; /* این باعث می شود تا یک ثانیه اول تغییر دیده نشود */
}
.element:hover {
background-color: red;
}
شما می توانید یک درنگ مثل بالا تعیین کنید و یا چند درنگ که با استفاده از ویرگول از هم جدا شدند را داشته باشید:
div {
transition-delay: .6s, 1.5s, 2s;
}
زمانی که شبیه به روش دوم درنگ را برای transition تعیین می کنید باید ترتیب آنها را در زمان تعیین دیگر ویژگی های transition در نظر داشته باشید. دیگر ویژگی های transition شامل موارد زیر هستند:
transition-property
transition-duration
transition-timing-function
در مثال زیر ویژگی color دارای دوره زمانی 2s و transition-timing-function آن برابر ease و درنگ آن برابر 3 ثانیه می باشد و دیگر ویژگی ها هم به ترتیب به همین صورت مقادیرشان تعیین می شود.
.element {
transition-property: color, background-color, left, top;
transition-duration: 2s, 1s, .3s, .2s;
transition-timing-function: ease, steps(3, end), ease-out, ease-in;
transition-delay: 3s, 1.5s, 700ms, 2s;
}
مقدار دهی این ویژگی به روش های زیر مجاز است:
transition-delay: 3s;
transition-delay: 300ms;
transition-delay: .6s, 250ms, 4s;
درنگ در ترنزیشن ها زمانی خیلی مفید خواهد بود که شما می خواهید چندین ترنزیشن را به صورت زنجیره ای پشت سر هم داشته باشید برای رسیدن به این هدف باید برای ترنزشین دوم حداقل یک مکث برابر با مدت زمان (transition-duration) ترنزیشن اول تنظیم کنید و یا بیشتر.
در مثال زیر تغییر رنگ انجام نمی شود تا زمانی که تغییر مکان به اتمام برسد و این کار به وسیله درنگ در ترنزیشن قابل انجام می باشد:
.element {
background-color: blue;
position: relative;
left: 0;
transition-property: left, background-color;
transition-duration: .4s, .4s;
transition-timing-function: ease, ease-out;
transition-delay: 0s, .4s;
}
.element:hover {
left: 400px;
background-color: #009966;
}
دموی زیر برای بررسی بیشتر آماده شده است:
See the Pen transition-delay by Mojtaba Seyedi (@seyedi) on CodePen.
با سلام
کاربرد ویژگی z-index و opacity در animation چیست؟
ممنون
سلام.
دقیقا این ویژگی ها هم مثل بقیه ویژگی هایی که انیمیشن میشه براشون نوشت عمل می کنند.
از opacity که خیلی استفاده میشه توی انیمیشن ها ولی z-index رو حتی خیلی ها نمی دونن که میشه واسش انیمیشن نوشت.
دموی زیر رو بررسی کنید اگر موردی بود مطرح کنید:
http://jsbin.com/koyemo/edi…
عنصری که متحرک هستش z-index واسش انیمیشن داره. و عنصر شماره 3, opacityش در حال تغییره هر لحظه.
سلام
z-indexدر کد زیر
@-webkit-keyframes image4 {
0% { top: 0px; opacity: 0; }
56% { top: 0px; opacity: 0; }
60% { top: 0px; opacity: 1; }
64% { top: 0px; opacity: 1; z-index:0}
76% { top: 0px; opacity: 1; z-index: 0; }
81% { top: 0px; z-index: -1; }
100%{ top: 0px; z-index: -1; }
}
به این معنی هستش که در زمانهای مختلف عکس موردنظر در اسلایدر جابجا میشه؟
بله. به معنای واقعی جابجایی نمیشه بهش گفت اما بله از لحاظ دیداری همونه. یک لایه ای که رسم میشه بالا پایین میشه به وسیله z-index.
تفاوت بین transition , animation در چیه؟
عمده تفاوتش اینه که در یک زمان مشخص در transition ها فقط یک حالت اول و یک حالت آخر تحت کنترل ماست. اما در انیمیشن ها هر لحظه ای از کار رو می تونیم کنترل کنیم. و زمان های بین زمان شروع و آخر رو هم تحت کنترل داریم.
ترنزیشن ها رو انیجا میتونین یاد بگیرین: http://css-tricks.ir/?p=1208
انیمیشن ها رو انیجا: http://css-tricks.ir/?p=1401
سلام
ویژگی z-index رو برای تمام زمانها میتونیم قرار بدیم؟
در کدی که فرستادم معنی مقدار 0 و 1- برای این ویژگی به ترتیب حالت ابتدای عکس و برگشتن به حالت اولیه هست؟
ممنون
سلام.
بله این ویژگی رو می تونیم برای لحظه به لحظه یک انمیشن تعیین کنیم.
z-index رو میشناسین؟ می دونین کارش چیه؟
ویژگی z-index یک عنصر : یعنی موقعیت عنصر در راستای محور z .
اولویت قرار گرقتن عناصر صفحه روی هم با z-index تعیین میشه
بله. زمانی که عنصر حالت های خاصی از position رو داره.
مطلبی که در مورد کدتون هم گفتین درسته.
اگر مشکلی در موردی که درگیرش هستین هست و فک میکنید من می تونم کمکتون کنم کدتون رو آپلود کنید توی یکی از دو سایتی که میگم یا هر جای دیگری شبیه به اونا و لینکش رو اینجا بزارید و مساله رو مطرح کنید تا باهم بتونیم بهتر بررسیش کنیم.
codepen.io
jsbin.com
کدها مربوط به ساخت اسلایدره که در قسمت
@-webkit-keyframes image1 متوجه نمیشم که z-index رو چرا برای بعضی زمانها درنظر میگیره ، منظورم اینکه که برای زمانهای مختلف چطور مقدار z-index تعیین میشه که اسلایدر درست کار کنه؟
در چه بازه زمانی باید ویژگی z-index را قرار بدیم؟
اگر امکان دارد ایمیلی بفرستید که کدها رو بفرستم
ممنون
اول از همه کد رو مرتب کردم که درکش راحت تر بشه. در ضمن اینجا نیازی به کار با z-index هم نبود. تقریبا اگر موردی توی مرورگرهای خاصی بوجود نیاد همین opacity کفایت میکنه.
اینجا کد رو می تونید ببینید: http://jsbin.com/salemi/1/edit
ما 5 تصویر داریم می خوایم هر کدومشون به مدت 5 ثانیه دیده بشن. پس نیاز به 25 ثانیه در کل داریم. پس باید هر تصویر انیمیشنی داشته باشه که مدت زمانش 25 ثانیه است.
حالا تصویر اول باید از ثانیه 0 تا 5 نمایش داده بشه پس باید opacity=1 رو از 0 تا 5 ثانیه واسش نوشت.
تصویر دوم باید از ثانیه 5 تا 10 دیده بشه پس opacity اون هم باید توی این بازه 1 بشه. و در بقیه زمانهای انیمیشن, باید 0 باشه.
خب حالا در مورد تصویر اول و انیمیشن اون:
باید در ثانیه 5 اپسیتیش بشه 0. و همینطور می دونیم که ثانیه 5 میشه 20% زمان انیمیشن (تناسب می گیریم) پس باید بنویسیم:
0% {opacity: 1}
20% {opacity: 0}
خب تا الان همه چی مثلا درسته. یعنی اول کار اپسیتی 1 هست و ثانیه 5 اپسیتی 0 میشه و عنصر ناپدید میشه. اما نکته ای که هست اگر ما اینطوری بنویسیم اپسیتی از ثانیه 0 تغییرات خودش رو شروع میکنه تا مقدارش بشه 1. یعنی تغییر 1 به 0 رو توی پنج ثانیه انجام میده. ولی ما نمی خوایم این اتفاق بیافته. بلکه می خوایم مثلا تا ثانیه چهار, تصویر کاملا شفاف باشه (یعنی اپسیتیش 1 باشه) و مثلا تازه از ثانیه 4 شروع کنه به ناپدید شدن پس باید بنویسم:
0% {opacity: 1}
16% {opacity: 1}
20% {opacity: 0}
(اونکه می بینید 21% گذاشته چون میخواسته حالتی رو در بیاره که قشنگ تر توی تصویر شماره دو محو بشه. به بیان دیگه میخواسته تغییرات اپسیتیه تصویر یک و دو در اطراف ثانیه 5 کمی تداخل داشته باشن تا افکت بهتر جلوه کنه.)
و همینطور می خوایم تصویر اول تا ثانیه تقریبا 25 ناپدید باشه (چون در این بازه زمانی بقیه تصاویر باید بیان و برن ) و چون می خوایم انیمیشن و اسلایدر ادامه دار باشه پس باید دوباره در ثانیه 25 تصویر اول آشکار بشه پس می نویسیم:
100% {opacity: 1}
حالا باز شاید بپرسید 96% اونجا چکاره است. خب دقیقا مثل توضیح اولی که داده شد.
اگر اون رو اونجا ننویسیم تغییر اپسیتی از حالت صفر به 1 از ثانیه 5 (20%) انجام میشه. که ما این رو نمی خوایم. ما می خوایم تا نزدیک ثانیه 25 ناپدید باشه و مثلا توی ثانیه 24 شروع کنه به ظاهر شدن پس باید بنویسیم:
96% {opacity: 0}
100% {opacity: 1}
بقیه انیمیشن ها رو هم با همین منطق میشه فهمید.
تصویر متحرک زیر رو هم چک کنید شاید کمکتون کنه:
http://mojoimage.com/free-i…
توی ثانیه های خاص نگهش داشتم که کاملا متوجه تداخلی که می گفتم بشین.
اگر نکته ای بود حتما بگید.
ممنون . توضیحات خیلی کامل بود
سلام
اگر امکان دارد سایتی را معرفی کنید که منوی افقی با زیرمنوی افقی (مثل سایت دیجی کالا) را آموزش میدهد.
زیرمنوی افقی رو نمیتونم درست کنم که با هاور شدن ظاهر میشه
ممنون
متاسفانه نمیشناسم سایتی رو.
کد
filter:alpha(opacity=100);
opacity:1;
برای مرورگر ie هستش؟
برای حالت عادی filter:opacity(1) درسته؟
آره ولی برای ورژن های خیلی پایین ie هستش که نیازی نیست بنویسید.
ولی اگر می خواید در نسخه هشت کار کنه اینطوری بنویسید:
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
در ضمن این لینکو چک کنید:
https://css-tricks.com/snip…
ممنون.
قسمت توضیح مربوط به فیلترها نوشته بودید:
filter: opacity(0.32);
این درسته؟
منوی پایین این سایت رو میشه با css درست کرد؟
میشه روش ساختش رو توضیح بدید؟
آره اول متوجه نشدم در مورد فیلترها صحبت می کنید. (اگر هر کامنتی رو زیر پست مربوطش بزارید خیلی به من کمک می کنید.) بله همون درسته. در ضمن اینو مگه چک نکردید:
http://tools.css-tricks.ir/…
اینجا می تونید تست کنید.
منظورتون قسمت آخرین اخبارو ایناست دیگه؟ بله میشه درست کرد.
نه راستش توضیح دادنش توی یک کامنت جاش نیست.
یعنی برای ساخت اون منو ی پایین صفحه (پیشنهادات ویژه سورس کد ) که در ابتدا مخفیه و بعدبا hover شدن ظاهر میشه فقط از css استفاده شده؟
اول منو ایجاد شده و بعد display:block شده؟
اگر امکان داره توضیح مختصری بدید.
ممنون
اینو چک کنید.
http://jsbin.com/xiroyi/1/e…
مطالب مربوط به position و transition و Transform در قسمت مرجع رو مطالعه کنید.
ممنون از کدی که فرستادین.
کدمنوی پایین ، فقط در مرورگر ie درست اجرا میشه ، در مرورگرهای firefox و chrome زمانیکه هاور میشه اسکرول عمودی دیده نمیشه
پیشوند -moz- و -webkit- رو هم نوشتم.
منوی همون سایت؟ راستش من آدرسشو پاک کردم. چیزی که دارین می سازین رو بزارید توی سایت jsbin.com تا بررسی کنم.
بله منوی همون سایت . کدی که شما فرستادین هاورش تو مرورگرهای firefox و chrome اجرا نمیشه.
من فقط تو هاور کدی که فرستادین مشکل دارم. زمانیکه هاور میشه اسکرول عمودی حذف میشه.
کد (کدی که شما فرستادین)رو در حالت دوبعدی هم نوشتم (translate) ، ولی بازهم اسکرول میره.
طبیعی هستش که اسکرول حذف بشه دیگه چون محتوایی بیرون از صفحه وجود نداره در زمان hover. اون آیتم کشیده میشه بالا و دیگه محتوایی خارج از viewport وجود نداره.
من چون فقط می خواستم مطلب رو برسونم خیلی دقیق نشدم. و الا باید position رو fix بدید.
http://jsbin.com/xiroyi/2/edit
همچنین اگر میخواین توی ie 8 کار کنه باید از bottom و یا امثال اون استفاده کنید:
http://jsbin.com/civada/1/edit
سلام
ممنون
سلام
کدهای مربوط به ساخت منوی آبشاری رو به ایمیلتون(support@css-tricks.ir) می فرستم
زمانیکه روی ” کالای دیجیتال ” موس رو میبرم زیرمنوی اول دیده میشه ولی زمانیکه روی ” موبایل ” میخوام موس رو ببرم نمیشه . زیرمنوی دوم دیده نمیشه. امکان داره که ایرادش رو برطرف کنید.
ممنون
عذرخواهی می کنم این مشکل رو برطرف کردم. ولی زمانیکه روی گزینه ” لوازم خانگی ” موس رو میبرم زیرمنوی مربوط به اون مثل حالتی که موس روی ” کالای دیجیتال ” میره ، نمیشه منظورم باکس زیرمنو هستش که از ابتدا شروع نمیشه ، شبیه منوی دیجی کالا نمیشه.
با سلام. فرض کنید هر کسی بیاد مشکلات طراحیشو زیر پست ها بپرسه. من چطوری میتونم به همه جواب بدم!؟ واقعا امکانش واسم نیست. و ازتون عذر خواهی می کنم.
در ضمن به امید خدا در آینده نزدیک محیطی برای رفع چنین مشکلاتی آماده می کنم. فعلا می تونید از فروم های سایت های طراحی وب استفاده کنید. موفق باشید.
سلام من میخوام کادر پست هام و ابزار سمت چپ وبلاگم بصورت خطچین ونصفه باشه همراه با قوس بالای 80 . یعنی مثلا سمت راست و پایینه کادر خطچینه قوس دار باشه و سمت چپ و بالا خالی باشه . وقتی موس رو میبریم روش کادر یه مقدار ضخامتش بیشتر بشه و بصورت کامل نمایش داده بشه و رنگش هم دو سه درجه پررنگتر بشه مثل قالبه وبلاگه sara-code.blogfa.com
میشه همراه با توضیح کدش رو بهم بدید ؟ امروز از صبح دارم میگردم ولی پیدا نکردم. راهنماییم کنید لطفا
ممنون
سلام ببخشید یه سوال من وقتی متنمو راست چین می کنم دیگه ترانزیشن روش کار نمی کنه فقط تو حالت وسط و چپ چین کار می کنه
سلام، نمونه کد بزارید توی پنل پرسش و پاسخ تا دوستان کمکتون کنند.
سلام
اگر به hover ترنزیشن بدم بعد از hover المان سری بر میگرده سر جاش و خوب نیست.
اگر به همه المانها hover بدم مشکلی که پیش میاد اینکه margin و padding و … المان والد هم نشون میده
یعنی چون فرایند کند میشه همه تغییررات در مورد المان کند میشه
راه حلش چیه؟
سلام، اولا ترنزیشن رو به خود المنت بدید نه به hover اون.
دوما all نزنید، فقط همون پراپرتی که میخواید ترنزیشن بگیره رو بنویسید. مثل مثالهایی که توی پست ها هست