CSS3 tek yönlü geçiş?

Question

CSS3 geçişlerini kullanarak, herhangi bir özellik için 'pürüzsüz' ve 'düzleştir' efekti elde etmek mümkündür.

Yalnızca 'düzleştirilmiş' bir efekti olması için kurulum yapabilir miyim? Çözümün yalnızca CSS’de olmasını ve mümkünse JavaScript’ten kaçınmasını istiyorum.

Mantık akışı:

• Kullanıcı elemanını tıkladığında Geçiş
• Geçiş için 0.5s alır fare düğmesini bıraktı gidelim siyah
• Kullanıcı beyaz arka plan rengini değiştirmek için 0.5s alır
• arka plan rengini siyahtan beyaza değiştir

Ne istersem:

• Kullanıcı
• Geçiş
• Kullanıcı fare düğmesini gidelim değiştirmeye 0s alır eleman tıkladığında Geçiş değiştirmek için 0.5s alır
• ...
hayır 'geçiş-in' var

zaman, ama bir 'geçiş' zamanı var.

Answer 1

Aşağıdakileri CSS3 Tryit Editor'da denedim ve Chrome'da (12.0.742.60 beta-m) çalıştı.

/* transition out, on mouseup, to white, 0.5s */ 
 
input 
 
{ 
 
    background:white; 
 
    -webkit-transition:background 0.5s; 
 
    -moz-transition:background 0.5s; 
 
    -ms-transition:background 0.5s; 
 
    -o-transition:background 0.5s; 
 
    transition:background 0.5s; 
 
} 
 

 
/* transition in, on click, to black, 0s */ 
 
input:active 
 
{ 
 
    background:black; 
 
    -webkit-transition:background 0s; 
 
    -moz-transition:background 0s; 
 
    -ms-transition:background 0s; 
 
    -o-transition:background 0s; 
 
    transition:background 0s; 
 
}

<input type="button" value="click me to see the transition effect!">