transition-property Property
ویژگی transition-property
در CSS مشخص می کند که به کدام ویژگیِ عنصر، transition اعمال شود.
نحوه نوشتار
transition-property: none; transition-property: border-radius; transition-property: width, background-color; transition-property: all;
مقادیر
none
هیچ ویژگی transition
نمیپذیرد.
all
تمام ویژگی ها transition
می پذیرند.
property
نام ویژگی که در نظر داریم transition
بر روی آن اعمال شود را وارد می کنیم.
در مثال زیر نحوه عملکرد این ویژگی را میبینیم:
html
<section> <h3>ماوس را روی هر یک از مستطیلها ببرید.</h4> <div class="box1"> <p>property: background-color;</p> <div class="square1"></div> </div> <div class="box2"> <p>property: margin-left;</p> <div class="square2"></div> </div> <div class="box3"> <p>property: margin-left, border-radius;</p> <div class="square3"></div> </div> <div class="box4"> <p>property: all;</p> <div class="square4"></div> </div> </section>
css
section { width: 100%; min-width: 660px; } h3 { margin: 10px; color: blue; text-align: center; direction: rtl; font-family: calibri; } p { text-align: center; margin: 3px 0 0 0; font-weight: bold; color: green; font: normal 14px monospace; } [class*="box"] { width: 45%; margin: 1%; border: 1px solid #444; float: left; } [class*="square"] { width: 85px; height: 85px; margin: 15px; background-color: red; transition: all 0.75s ease-in-out; } [class*="box"]:hover [class*="square"] { margin-left: 70%; border-radius: 100%; background-color: dodgerblue; transform: rotate(720deg); } .square1 { transition-property: background-color; } .square2 { transition-property: margin-left; } .square3 { transition-property: margin-left, border-radius; } .square4 { transition-property: all; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.