ویژگی transition-property در CSS

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 پشتیبانی می کنند.