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