ویژگی transition-delay در CSS

transition-delay Property

ویژگی transition-duration در CSS مدت زمانی را که طول می کشد تا انیمیشن به اتمام برسد را مشخص می کند. مقدار این ویژگی بطور پیشفرض 0 است، یعنی انمیشنی رخ نمی دهد.

می توان چندین مقدار duration را بکار برد. برای این منظور باید به همان تعداد property توسط ویژگی transition-property مشخص شده باشد.

transition-duration: 3s;
transition-duration: 320ms;
transition-duration: 0.3s;

مقادیر

زمان​

این بازه زمانیست که عنصر از حالت اول به حالت بعد تغییر می کند. در بازه زمانی ۰s هیچ ترنزیشنی اتفاق نمی افتد و تغییر حالت عنصر از a به b درجا اتفاق می افتد. واحد زمانی برای این مقدار s(ثانیه) و ms(میلی ثانیه) است.

در مثال زیر نحوه عملکرد این ویژگی را می بینیم:

html

<section>
    <div class="box1">
        <p>duration: 0.25s</p>
        <div class="square1"></div>
    </div>
    <div class="box2">
        <p>duration: 0.5s</p>
        <div class="square2"></div>
    </div>
    <div class="box3">
        <p>duration: 0.75s</p>
        <div class="square3"></div>
    </div>
    <div class="box4">
        <p>duration: 1s</p>
        <div class="square4"></div>
    </div>
</section>

css

section {
    width: 100%;
    min-width: 660px;
}
p {
    text-align: center;
    margin: 3px 0 0 0;
    font-weight: bold;
    color: green;
}
[class*="box"] {
    width: 45%;
    margin: 2%;
    border: 1px solid #444;
    float: left;
}
[class*="square"] {
    width: 85px;
    height: 85px;
    margin: 15px;
    background-color: red;
}
[class*="box"]:hover [class*="square"] {
    margin-left: 70%;
    border-radius: 100%;
    background-color: dodgerblue;
}
.square1 {
    transition: all 0.25s ease-in-out; 
}
.square2 {
    transition: all 0.5s ease-in-out; 
}
.square3 {
    transition: all 0.75s ease-in-out; 
}
.square4 {
    transition: all 1s ease-in-out; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتبانی می کنند.