انتقال ها (Transitions)
«انتقال (Transition)» یعنی تغییرِ نرمِ استایل در زمان مشخص. با آن عرض، رنگ یا Transform آرام تغییر می کند. مثل انیمیشن کوتاه روی دکمه بازی.
ویژگی transition؛ خلاصه چهار گزینه
transition یک خلاصه است. شامل property، duration، timing-function و delay می شود.
div {\n width: 100px;\n height: 100px;\n background-color: red;\n transition: width 2s;\n}\nفعال کردن انتقال با :hover
انتقال وقتی رخ می دهد که مقدار ویژگی عوض شود. معمولا در :hover یا :focus.
div:hover {\n width: 300px;\n}\nنکته: وقتی موس خارج شود، عنصر به حالت قبل برمی گردد.
تغییر چند ویژگی با هم
می توان چند ویژگی را با ویرگول جدا کرد. هرکدام مدت خاص خود را دارند.
div {\n transition: width 2s, height 4s, background-color 3s;\n}\nمنحنی سرعت؛ timing-function
timing-function شکل حرکت را تعیین می کند؛ مثل ease یا linear.
#div1 {\n transition-timing-function: linear;\n}\n#div2 {\n transition-timing-function: ease;\n}\n#div3 {\n transition-timing-function: ease-in;\n}\n#div4 {\n transition-timing-function: ease-out;\n}\n#div5 {\n transition-timing-function: ease-in-out;\n}\nتاخیر شروع؛ transition-delay
delay یعنی شروع انتقال دیرتر باشد. واحد ثانیه یا میلی ثانیه است.
div {\n transition-delay: 1s;\n}\nTransition به همراه Transform
می توان Transform را هم نرم کرد. پس حرکت و چرخش روان می شود.
div {\n transition: width 2s, height 2s, background-color 2s, transform 2s;\n}\nbutton {\n transition: background-color 1s ease-out, transform 1s ease-out;\n}\nچهار ویژگی به صورت جداگانه
می توان هر بخش را جدا نوشت. این خوانایی را بیشتر می کند.
div {\n transition-property: width;\n transition-duration: 2s;\n transition-timing-function: linear;\n transition-delay: 1s;\n}\nحالت خلاصه؛ shorthand
همه را می توان در یک خط آورد. ترتیب مهم است.
div {\n transition: width 2s linear 1s;\n}\nمراحل تمرین سریع
- روی یک کارت، transition بگذار.
- در :hover مقدارها را تغییر بده.
- timing-function و delay را تست کن.
برای حرکت سه بعدی، تبدیل های سه بعدی را ببین. برای حرکت روی صفحه، تبدیل های دو بعدی مفید است. این صفحه انتقال های CSS را نشانه گذاری کن.
جمع بندی سریع
- transition تغییرها را نرم می کند.
- duration زمان را تعیین می کند.
- timing-function شکل حرکت است.
- delay شروع را عقب می اندازد.
- با :hover راحت تست کن.